8 Ways to verify forms in HTML5 (go)

Before we go into the form validation, let's think about the true meaning of form validation. At its core, form validation is a system that detects invalid control data and flags these errors for end users. In other words, form validation is a series of checks and notifies the user to correct the error before the form submits the server.

But what is the true form validation?

is an optimization.

Form validation is an optimization because the form validation mechanism is not sufficient to guarantee that the form data submitted to the server is correct and valid. On the other hand, form validation is designed to make web apps throw errors faster. In other words, it is best to use the browser's built-in processing mechanism to tell users that the page contains invalid form control values. In the past, data was turned around the network just to let the server notify the user that he entered the wrong data. If the browser is fully capable of getting the error to be captured before leaving the client, then we should take advantage of that.

However, the browser's form check is not sufficient to handle all errors.

That being said, HTML5 has introduced eight ways to verify the correctness of the data in a form control. Let's take a look at it in turn, but first introduce the Validitystate object for the feedback validation state.

In browsers that support HTML5 forms validation, you can access the Validitystate object through form controls:

var valcheck = document.myForm.myInput.validity;

This line of code gets the Validitystate object for the form element named Myinput. The object contains references to all eight validation states, as well as the final validation results.

The method is called as follows:

Valcheck.valid

After execution, we get a Boolean value that indicates whether the form control has passed all validation constraints. The valid feature can be seen as the final verification result: If all eight constraints are passed, the valid attribute is true, otherwise the valid flag is false if one of the constraints does not pass.
As mentioned earlier, there are eight possible validation constraints for any form element. Each condition has a corresponding attribute name in the Validitystate object and can be accessed in the appropriate way. Let's examine them one by one to see how they are associated with form controls, and how they are checked based on the Validitystate object:

1, valuemissing

Purpose: Ensure that the values in the form control are filled in.

Usage: Set the required attribute to true in the form control.

Example:

<Type= "text" name= "MyText" required>     

Details: If the form control has the required attribute set, the control will remain in an invalid state until the user fills in or fills in the value by code call. For example, an empty text input box cannot pass a required check unless you enter any text in it. Valuemissing returns True when the input value is empty.

2, Typemismatch

Purpose: To ensure that the value of the control matches the expected type (e.g. Numbe, email, URL, etc.).

Usage: Specifies the type attribute value of the form control.

Example:

<type= "Email" name= "Myemail">    

Special form control type is not only used to customize the phone keyboard, if the browser can recognize that the input in the form control does not conform to the corresponding type rules, such as the e-mail address does not have the @ symbol, or the number control input value is not a valid digit, then the The browser will flag the control to indicate that the type does not match. The Typemismatch returns true regardless of the error condition.

3, Patternmismatch

Purpose: Verifies that the input is a valid format based on the formatting rules set on the form control.

Usage: Set the Pattern property on the form control, and the well gives the appropriate matching rules.

Example:

<Type= "text" name= "Creditcardnumber" pattern= "[0-9]{16}" title= "A CreditCard number is digits with no spaces or dashes ">        

Details: The pattern feature provides developers with a powerful and flexible way to set a regular expression validation mechanism for the control values of a form. When the pattern attribute is set for a control, Patternmismatch returns a true value whenever the value of the input control does not conform to the pattern rule. From both the user and technical reference, you should set the title attribute in the form control that contains the pattern attribute to illustrate the effect of the rule.

4, Toolong

Purpose: Avoid entering values that contain too many characters.

Usage: Set the MaxLength attribute on the form control.

Example:

<Type= "text" name= "Limitedtext" maxLength= "     $" > 

Details: If the input value is longer than MaxLength, the Toolong attribute returns True. Although form controls typically limit the maximum length when user input, in some cases, such as through program settings, the maximum value is exceeded.

5, Rangeunderflow

Purpose: Limit the minimum value of a numeric control.

Usage: Sets the min attribute for the form control and gives the minimum allowable value.

Example:

<Type= "range" name= "Agecheck" min= "+">      

Details: In a form control that needs to be checked for a range of values, the value is likely to be temporarily below the set lower limit. At this point, the Rangeunderflow attribute of the Validitystate returns True.

6, Rangeoverflow

Purpose: Limits the maximum value of a numeric control.

Usage: Sets the max attribute for the form control and gives the maximum allowable value.

Example:

<Type= "range" name= "Kidagecheck" max= "      All" > 

Description: Similar to Rangeunderflow, if a form control has a larger value than Max, the attribute returns True.

7, Stepmismatch

Purpose: Ensure that the input values are set to Min, Max, and step.

Usage: Sets the Step property for the form control, specifying the increment of the value.

Example:

<Type= "range" name= "Confidencelevel" min= "0" max= "+" step= "5" >          

This constraint is used to ensure that the values meet the requirements of Min, Max, and step. In other words, the current value must be the sum of the minimum value and a multiple of the step attribute value. For example, a range from 0 to 100,step has an attribute value of 5, at which point 17 is not allowed, otherwise stepmismatch returns a true value.

8, Customerror

Objective: To deal with the error of explicit setting and calculation of application code.

Usage: Call setcustomvalidity (message) to place the form control in the Customerror state.

Example:

Passwordconfirmationfield.setcustomvalidity ("Password values do not match.");

The browser built-in authentication mechanism does not apply, needs to display the custom validation error information. Application code should set these custom validation messages when the input values do not conform to the semantic rules.

A typical use case for a custom validation message is to verify that the values in the control are consistent. For example, the password and password confirm that the value of the two box does not match. As soon as the validation message is customized, the control is in an invalid state, and Customerror returns True. To clear the error, simply call Setcustomvalidity ("") on the control.

Well, these are the 8 basic methods of form verification in HTML5, and hope to help beginners.

8 Ways to verify forms in HTML5 (go)