Home > Web Front-end > H5 Tutorial > Detailed introduction to setCustomValidity of html5

Detailed introduction to setCustomValidity of html5

黄舟
Release: 2017-03-31 13:26:18
Original
6143 people have browsed it

1. Default prompt

html5enriches form validation, for example:

<form>
    <input type=text required />
    <input type=submit></form>
Copy after login

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
Copy after login

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(&#39;&#39;) setCustomValidity(null) setCustomValidity(undefined)
Copy after login

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>
Copy after login

or:

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

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(&#39;#form1&#39;).addEventListener(&#39;submit&#39;,function(e){    //ajax

    e.preventDefault();
},false);
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template