Detailed introduction to setCustomValidity of html5

1. Default prompt

html5enriches form validation, for example:

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

If there is no input content in the text, click submitButton will prompt "Please fill in this field."

The sequence of events is as follows:
(1) The click event of the submit button, if the default event is cancelled, then Terminate
(2) HTML5 form verification and prompts. If the form verification fails, prompt the first illegal input and terminate
(3) The submit event of the form form. If the default event is canceled, terminate

Note:
Using js to trigger the submit event of the form will directly enter step (3), and HTML5 form verification will not be performed.
So, if you want the HTML5 verification prompt to appear, you must go through the submit button.

2. Custom prompts

After setting a custom prompt using setCustomValidity,
validity.customError will become true, and checkValidity will always return false.
Furthermore, form validation determines whether to prompt based on checkValidity.

Therefore, the following properties of validity should be used to set and cancel custom prompts:

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

Note:
The above property values ​​are read-only , manual modification is invalid.

Among them, the way to cancel the custom prompt is as follows:

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

Example:

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

or:

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

3. Ajax after successful verification Submit

Considering the sequence of events, the submit event of the form will only be triggered after the form verification passes.
So, you can use ajax to submit data by canceling the default behavior in the submit event of the form.

Example:

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

    e.preventDefault();
},false);

The above is the detailed content of Detailed introduction to setCustomValidity of html5. For more information, please follow other related articles on the PHP Chinese website!