Detaillierte Einführung in setCustomValidity von HTML5

1. Die Standardaufforderung

html5bereichert die Formularvalidierung, zum Beispiel:

<form>
    <input type=text required />
    <input type=submit></form>

Wenn kein Eingabeinhalt vorhanden ist Klicken Sie im Text auf die Schaltfläche „Senden“ . Es erscheint die Meldung „Bitte füllen Sie dieses Feld aus.“

Die Reihenfolge der Ereignisse ist wie folgt: (1 ) Klicken Sie auf die Schaltfläche „Ereignis senden“, wenn das Standardereignis abgebrochen wird, dann beenden Sie
(2) HTML5-Formularüberprüfung und Eingabeaufforderung. Wenn die Formularüberprüfung fehlschlägt, fordern Sie die erste unzulässige Eingabe auf und beenden Sie
(3) Ereignis senden von das Formularformular. Wenn das Standardereignis abgebrochen wird, dann Beenden

Hinweis:

Wenn Sie js verwenden, um das Übermittlungsereignis des Formulars auszulösen, wird Schritt (3) direkt aufgerufen und es wird keine HTML5-Formularüberprüfung durchgeführt .
Wenn Sie also möchten, dass die HTML5-Verifizierungsaufforderung angezeigt wird, müssen Sie auf die Schaltfläche „Senden“ klicken.

2. Benutzerdefinierte Eingabeaufforderung

Nachdem Sie mit setCustomValidity eine benutzerdefinierte Eingabeaufforderung festgelegt haben, wird

validity.customError zu „true“ und checkValidity gibt immer „false“ zurück.
Darüber hinaus bestimmt die Formularvalidierung basierend auf checkValidity, ob eine Eingabeaufforderung ausgegeben wird.

Daher sollte das folgende

Attribut der Gültigkeit verwendet werden, um benutzerdefinierte Eingabeaufforderungen festzulegen und abzubrechen:

badInput，customError，patternMismatch，rangeOverflow，rangeUnderflow，stepMismatch，tooLong，
typeMismatch，valid，valueMissing

Hinweis:

Die oben genannten Attributwerte ​​sind nur zum Lesen, manuelle Änderungen sind ungültig.

Unter anderem können Sie die benutzerdefinierte Eingabeaufforderung wie folgt abbrechen:

setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)

Beispiel:

<form>
    <input id=text1 type=text required />
    <input id=submit1 type=submit></form><script>
    document.querySelector(&#39;#submit1&#39;).addEventListener(&#39;click&#39;,function(){        
    var $text1= document.querySelector(&#39;#text1&#39;);

        $text1.validity.valueMissing
            ?$text1.setCustomValidity(&#39;The value can\&#39;t be empty.&#39;)
            : $text1.setCustomValidity(&#39;&#39;);
    },false);</script>

oder:

$text1.setCustomValidity((function(){    
if($text1.validity.valueMissing){       
 return 'The value can\'t be empty.';
    }    //不写return或者写“return;”表示“return undefined;”}()));

3. Ajax-Übermittlung nach erfolgreicher Überprüfung

Unter Berücksichtigung der Abfolge der Ereignisse wird das Übermittlungsereignis des Formulars erst ausgelöst, nachdem die Formularüberprüfung bestanden wurde.

Sie können also Ajax verwenden, um Daten zu übermitteln, indem Sie das Standardverhalten
im Submit-Ereignis des Formulars abbrechen. Beispiel:

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in setCustomValidity von HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!