Löschen, Entfernen oder Zurücksetzen des HTML5-Formularüberprüfungsstatus nach "setCustomValidity (" ... ");"?

Löschen, zu entfernen oder den reset-HTML5 Formular-Validierung Zustand nach setCustomValidity("...");?

Einstellung ein leerer string ist, setCustomValidity(""); im Firefox und Chrome schließt das Formular-Validierung Fehlermeldung. Ich möchte nicht schließen Sie die Formular-Validierung Fehlermeldung. Ich möchte zum zurücksetzen der überprüfung Stand, so dass die nächste Antwort, die überprüft werden kann und auch zu halten, die angezeigt Validierung Fehlermeldung. Wenn die Validierung Zustand nicht zurückgesetzt wird, dann wird auch der nächste, richtige Antwort falsch zeigen eine Validierung Fehlermeldung.

So irgendwie "klar" bedeutet "in der Nähe"?

Wenn das argument ein leerer string ist, löscht die benutzerdefinierten Fehler.

http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#the-constraint-validation-api

Hier ist eine Validierung der test-case:

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Validation test case</title>
    </head>
    <body>
        <form id="testForm">
            <input type="text" id="answer" pattern="[A-Za-z]+" autofocus required/>
            <input type="submit" value="OK"/>
        </form>

        <script>
            /*jslint browser: true, vars: true, white: true, maxerr: 50, indent: 4 */
            (function ()
            {
                "use strict";

                var form = null;
                var answer = null;

                var isCorrectAnswer = function (value)
                {
                    return (value === "a");
                };

                var closeValidation = function (element)
                {
                    //Close the form validation error message if displayed.
                    element.blur();
                    element.focus();
                };

                var validateForm = function (event)
                {
                    event.preventDefault();
                    event.stopPropagation();

                    var isValidForm = event.target.checkValidity();
                    if (isValidForm)
                    {
                        if (isCorrectAnswer(answer.value))
                        {
                            form.reset();
                            closeValidation(answer);

                            console.log("Correct answer.");
                            alert("Correct answer.");
                        }
                        else
                        {
                            console.log("Incorrect answer.");
                            answer.setCustomValidity("Incorrect answer.");
                            answer.checkValidity();
                            //answer.setCustomValidity("");
                        }
                    }
                };

                window.addEventListener("DOMContentLoaded", function ()
                {
                    form = document.getElementById("testForm");
                    answer = document.getElementById("answer");

                    form.addEventListener("submit", validateForm, false);
                }, false);
            }());
        </script>
    </body>
</html>

Geben eine falsche Antwort, keine Buchstaben(s), sondern "ein", und drücken Sie die EINGABETASTE.
Geben Sie die richtige Antwort "a", und drücken Sie die EINGABETASTE.

Ohne änderungen an der test-Fall, das Verhalten ist das gleiche in Opera, Firefox und Chrome (mit Ausnahme der Chrom-Fehler). Die Validierung Fehlermeldung weiterhin angezeigt wird, unabhängig davon, ob die Antwort richtig oder falsch ist.

Nun, nach answer.setCustomValidity(""); ist unkommentiert, Opera löscht die benutzerdefinierte Gültigkeitsprüfung Fehler aber nicht in der Nähe der Validierung Fehlermeldung, die ist, was ich erwarte. Auf der anderen Seite, Firefox und Chrome beide deaktivieren Sie die benutzerdefinierte Gültigkeitsprüfung Fehler und schließen Sie die validation-Fehlermeldung (bug?).

FEHLER: Chrom nicht "checkValidity()" als erste aufgerufen.

In Chrom, answer.checkValidity(); nicht in die Validierungs-Nachricht nach dem ersten Einreichen. Nachfolgende vorlegt, zeigen die Validierung Fehlermeldung.

http://code.google.com/p/chromium/issues/detail?id=95970

FEHLER: In Chrom, die Validierung Fehlermeldung wird ausgeblendet, aber nicht geschlossen werden, wenn die Eingabe geändert wird.

http://code.google.com/p/chromium/issues/detail?id=95973

Opera 11.51 Build 1087

Firefox 6.0.2

Google Chrome 13.0.782.220 m

InformationsquelleAutor der Frage XP1 | 2011-09-09

Einer benutzerdefinierten Validierung Nachricht wird nicht angezeigt, wenn setCustomValidity() aufgerufen, in den 'submit' - Ereignis-handler.

@tkent:

Bestätigte ich Opera 11.50 arbeitete als Ihre Erwartungen, aber Firefox 6 und
Chrome 14 hat nicht.

Jedoch, Chrome Verhalten ist korrekt nach dem standard.

http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm

Wenn der eingereicht von der Methode submit () - flag ist nicht gesetzt, und der
submitter-element ist nicht für die Validierung der Staat falsch ist, dann interaktiv
überprüfen der constraints der form, und überprüfen Sie das Ergebnis: wenn das Ergebnis
negativ ist (die constraint-Validierung der Schluss gezogen, dass
ungültige Felder und wohl, informiert die Benutzer von dieser), dann Abbruch
diese Schritte.

Wenn der eingereicht von der Methode submit() flag nicht gesetzt ist, dann Feuer
ein einfaches Ereignis ist, cancelable namens Einreichen, in form. Wenn die
event-Standard-Aktion ist verhindert (d.h. wenn das Ereignis abgebrochen wird)
wieder bricht diese Schritte. Andernfalls fahren (praktisch der Standard
Aktion zum ausführen der Vorlage).

Browsern aufrufen müssen Sie die interaktive Validierung, BEVOR Sie den 'submit' - Ereignis
abgefeuert wird. Müssen Sie rufen Sie setCustomValidity (), bevor Sie den 'submit' - Ereignis
wenn Sie möchten, einen browser zum anzeigen einer prüfungsmeldung. Opera scheint
behandeln Sie diese Schritte in der falschen Reihenfolge. Beachten Sie, dass checkValidity() in
dein code hat keinen Effekt sowieso. checkValidity() nie zeigt
Validierung Nachricht.

http://code.google.com/p/chromium/issues/detail?id=95970

[Fehler 11287] New: 'setCustomValidity" call-in-element verwenden soll 'oninput-event...

@Nick:

'setCustomValidity" call-in-element verwenden soll 'oninput'
Ereignis...

http://lists.w3.org/Archives/Public/public-html/2010Nov/0186.html

Re: [whatwg] Formular-element-ungültige Nachricht

@Mounir Lamouri:

So, was Sie tun, ist die Herstellung des Elements gültig, in dem invalid-Ereignis, die
ist es zu spät. Nach dem invalid-Ereignis, Firefox versucht das UI
mit der validationMessage, die geben einen leeren string zurück, wenn der
Formular gültig ist. Sollten Sie die Veranstaltung abzusagen, wenn Sie wollen, haben keine Benutzeroberfläche
aber noch stornieren Vorlage. Sie verwenden sollten
onchange/oninput (Hervorhebung Hinzugefügt), um die Gültigkeit Zustand, wenn Sie möchten, dass das Formular
eingereicht werden können.

http://www.mail-archive.com/[email protected]/msg23762.html

Fix ist, zu bestätigen die Eingabe mit der "Eingabe" - event-handler anstelle des "submit" - event-handler.

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Validation test case</title>
    </head>
    <body>
        <form id="testForm">
            <input type="text" id="answer" pattern="[A-Za-z]+" autofocus required/>
            <input type="submit" value="OK"/>
        </form>

        <script>
            /*jslint browser: true, vars: true, white: true, maxerr: 50, indent: 4 */
            (function (console)
            {
                "use strict";

                var form = null;
                var answer = null;

                var isCorrectAnswer = function (value)
                {
                    return (value === "a");
                };

                var closeValidation = function (element)
                {
                    //Close the form validation error message if displayed.
                    element.blur();
                    element.focus();
                };

                var validateForm = function (event)
                {
                    event.preventDefault();
                    event.stopPropagation();

                    var isValidForm = event.target.checkValidity();
                    if (isValidForm)
                    {
                        console.log("Correct answer.");
                        closeValidation(answer);
                        form.reset();
                    }
                    else
                    {
                        console.log("Incorrect answer.");
                    }
                };

                window.addEventListener("DOMContentLoaded", function ()
                {
                    form = document.getElementById("testForm");
                    answer = document.getElementById("answer");

                    form.addEventListener("submit", validateForm, false);
                    answer.addEventListener("input", function ()
                    {
                        //Only show custom form validation error message if the value matches the pattern.
                        if (answer.value.match(new RegExp(answer.getAttribute("pattern"))))
                        {
                            answer.setCustomValidity(isCorrectAnswer(answer.value) ? "" : "Incorrect answer.");
                        }
                    }, false);
                }, false);
            }(window.console));
        </script>
    </body>
</html>

InformationsquelleAutor der Antwort XP1

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.