HTML5 uses the constraint verification API to check the code instance of the input data of the form. html5api

HTML5 uses the constraint verification API to check the code instance of the input data of the form. html5api

HTML5 has a great deal of Optimization for forms, whether it is semantics, widgets, or data format validation. I guess you will be reluctant to use these new features on the pretext of browser compatibility, but this should not be the reason for your stagnation, in addition, tool libraries such as Modernizr and ployfill help you perform rollback on browsers that do not support Html5. When you really try to use the new features of these forms, I promise you will fall in love with it. If the only defect is that the style of the prompt box is the default of the browser, you cannot change it, okay, if you believe in the aesthetic level of browser designers (I believe their design level is better than that of most ordinary people, if style compatibility is not considered), it is right to study it quickly!

Native Verification

Input type

HTML5 provides many native support for data format verification, such:

<input type='email'/>

When you click the submit button, if the format you entered does not conform to the email format, the submission will fail, and the browser will prompt you with an error message.

For example, in chrome:

Note:

1. browser verification will only be triggered when you submit

2. Different browser prompts have different behavior styles.

3. When multiple inputs do not meet the requirements, only one error is prompted. Generally

Do not assume that when the input type is equal to tel, if you do not enter the phone number format, it will be blocked by the browser and an error message will be prompted during submission, type = 'tel' only plays a semantic role on the PC end. On the Mobile End, the generated Keyboard can be a pure numeric keyboard and cannot be used for data verification.

Pattern

You can use the pattern attribute to set custom format verification for data formats that do not provide native authentication on the browser. The value of the pattern attribute is a regular expression (string ):

<Input type = 'tele' pattern = '[0-9] {11}' title = 'enter 11 phone number'>

When you click submit, if the data you entered does not conform to the regular format in pattern, the browser will block form submission and prompt: 'Be consistent with the requested format' + content in the title (small words ). But note that when the content in your text box is blank, the browser will not check it and will directly submit the form (because the browser thinks this box is not mandatory ). If you want this box to have content, add the required attribute.

Through the HTML native verification system, we can basically meet our restrictions on Form submission. However, HTML5 provides more advanced features to help us develop and improve user experience.

Constraint verification API

Default Message

Browser prompts like 'please keep consistent with the requested format' are hidden in the validationMessage attribute of the input DOM object. This attribute is read-only in most modern browsers, it cannot be modified, for example, the following code:

<input type="text" required id='input'/>

If the Input content is blank during submission, the browser will prompt 'enter this field'. We can print this sentence in the console:

Var input = document. getElementById ('input') input. validationMessage // => 'enter this field'

To modify the content, call the setCustomValidity interface to change the value of validationMessage.

Input. setCustomValidity ('this field must be filled in '); // The following method applies to browsers that do not support setCustomValidity. Basically, modern browsers do not support input. validationMessage = 'this field must be filled in'

Note: Although HTML native verification such as required can change the information, it cannot set the information to a null string. The reason is described below.

Principle

The HTML form verification system uses the validationMessage attribute to check whether the data in the text box has been verified. If the value is an empty string, the verification is successful. Otherwise, the verification is failed, the browser prompts the user with the value as an error message. Therefore, during native verification, you cannot set the value of validationMessage as a null string.

Simple instance of the API for Constraints Verification

The constraint validation API is a more flexible expression on the native method. You can set whether the data passes by yourself without using regular expressions. The principle is very simple. if the data format is satisfactory, you can call setCustomValidity to leave the value of validationMessage blank. Otherwise, you can call setCustomValidity to pass in the error message:

Input. addEventListener ('input', function () {if (this. value. length> 3) {// The Judgment condition is completely custom input. setCustomValidity ('incorrectly formatted ');} else {input. setCustomValidity ('')}});

Every time you enter the keyboard, the code will determine whether the format is correct and then call setCustomValidity to set the value of validationMessage. Do not think that the browser will prompt you whether the result is correct every time you press the key. The browser will only prompt the value in validationMessage (if any) When you click the submit button ).

If you haven't thought about it, you must ask, in this case, why do you need to bind a keyboard event to the input and make judgments for each input? Directly bind a submission event to the form. It is advantageous to judge how good it is when submitting the event.

With the input to determine the format and style

As a user, we certainly want to see that the text box turns red (or there are other prompts) after the incorrect format is entered ). When I enter a character each time, if it is correct, the text box will return to normal. We can use the CSS pseudo class to implement this function:

Input: required {background-color: # FFE14D;}/* This pseudo class uses the validationMessage attribute to determine */input: invalid {border: 2px solid red ;}

The above required pseudo class will provide a yellow background color for input that is required but empty, the following invalid pseudo-class will add a 2px red edge for all input that fail verification. Now we can add the Input class to our input box.

The judgment conditions for these pseudo classes are the same as those for the browser to determine whether you can submit the form. view the values in validationMessage. Therefore, the above settings trigger a judgment for each keyboard input event to change the rendering of the CSS pseudo-class style. The intention is here.

Better User Experience

Another drawback is that when an input is set to required, the invalid pseudo class will work for it during initialization because it is empty, this is not what we want to see, because we have not done anything yet.

We can add the parent selector. invalid before these pseudo classes, so that these pseudo classes work only when the parent element has an invalid class. You can set a submit event. After a form submission fails due to verification, the invalid event of input is triggered and the invalid class is added to the form:

Form. addEventListener ('invalid', function () {this. className = 'invalid'}, true) Because invaild is an Input event rather than a form event, we set the third parameter to true and use event capture for processing. In this way, we are done.

Final Instance

Now it's time to summarize what we 've learned and create best practices:

<! DOCTYPE html> 
After running:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.