Introduction détaillée à setCustomValidity de html5

1. L'invite par défaut

html5enrichit la validation du formulaire, par exemple :

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

S'il n'y a pas de contenu d'entrée dans le texte, cliquez sur le bouton Soumettre , le message "Veuillez remplir ce champ"

La séquence des événements est la suivante :
(1 ) Cliquez sur l'événement du bouton de soumission, si l'événement par défaut est annulé, puis terminez
(2) la vérification et l'invite du formulaire html5. Si la vérification du formulaire échoue, invitez la première entrée illégale et terminez
(3) l'événement de soumission de. le formulaire. Si l'événement par défaut est annulé, alors Terminer

Remarque :
L'utilisation de js pour déclencher l'événement de soumission du formulaire entrera directement dans l'étape (3) et la vérification du formulaire HTML5 ne sera pas effectuée. .
Donc, si vous souhaitez que l'invite de vérification HTML5 apparaisse, vous devez passer par le bouton Soumettre.

2. Invite personnalisée

Après avoir défini une invite personnalisée à l'aide de setCustomValidity,
validity.customError deviendra vrai et checkValidity retournera toujours faux.
De plus, la validation du formulaire détermine s'il faut demander une invite en fonction de checkValidity.

Par conséquent, l' attribut de validité suivant doit être utilisé pour définir et annuler des invites personnalisées :

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

Remarque :
Les valeurs d'attribut ci-dessus Sont uniquement en lecture, la modification manuelle n'est pas valide.

Parmi eux, la manière d'annuler l'invite personnalisée est la suivante :

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

Exemple :

<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>

ou :

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

3. Soumission Ajax après vérification réussie

Compte tenu de la séquence des événements, l'événement de soumission du formulaire ne sera déclenché qu'une fois la vérification du formulaire réussie.
Vous pouvez donc utiliser ajax pour soumettre des données en annulant le comportement par défaut dans l'événement de soumission du formulaire.

Exemple :

document.querySelector('#form1').addEventListener('submit',function(e){    //ajax

    e.preventDefault();
},false);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!