HTML5 Form Validation

HTML5 Form Validation Validation propertiesRequired Property

The Required property primarily prevents the form from being submitted when the domain is empty. This property does not need to set any values.

Syntax: <input type= "text" required/>

Pattern Property

The function of the Pattern attribute is to implement validation of the element. It supports the use of regular expressions to customize validation rules.

Syntax: <input type= "text" pattern= "13[0-9]\d{8}"/>

Min and Max properties

The Min, max, and step properties are used to define the input type that contains numbers or dates.

Syntax:: <input type= "Number" min= "1" max= "5" >

Minlength and Maxlength properties

The Minlength and Maxlength properties are the minimum and maximum strings allowed for a custom element.

Syntax: <input type= "Text" minlength= "1" maxlength= "5" >

Validity Property

In the new feature provided by HTML5 for form validation, a validity property is provided. This property is used to describe the valid state of the specified element using the Validitystate object.

The Validitystate object represents a valid state and enables constraint validation on the specified element, which provides a series of properties that describe the valid state of the specified element.

How to get the Validitystate object, using the property content it provides:

Syntax: Specifies the element. Validity can get Validitystate object

Example: Elem. Validity. Valid

Validation statusValid status

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 validation result: If all constraints are passed, the value of valid is true. Otherwise, if one of the constraints does not pass, the value of valid is false.

if (username.validity.valid) {    alert (' through 'else  {    alert (' user name has a problem '); ' }

valuemissing Status

If the form control has the required attribute set, the control will remain in an invalid state until the user finishes filling it out, or when the value is filled by code invocation. 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.

if (username.validity.valueMissing) {    alert (' user name cannot be null 'else  {    alert (' through ') );}

typemismatch Status

If the input syntax does not conform to the specified type, then this state is true.

For example, the content of an email type INPUT element is not an e-mail address.

if (email.validity.typeMismatch) {    alert (' email format incorrect 'else  {    alert (' through ') );}

pattenmismatch Status

If the input does not match the set mode, then this state is true.

if (phone.validity.patternMismatch) {    alert (' phone number format incorrect 'else  {    alert (' through ');}

toolong Status

If the input length is greater than the value specified by the MaxLength property, then this state is true.

if (pwd.validity.tooLong) {    alert (' The password length cannot exceed 12 bits'else  {    alert (' through ');}

rangeunderflow Status

If the input is less than the value declared by the min attribute, then this state is true.

if (age.validity.rangeUnderflow) {    alert (' age does not meet requirement'else  {    alert ( ' through ');}

stepmismatch Status

If the given value is inconsistent with min,max,step, then this state is true.

if (elem.validity.setpMismatch) {    alert (' range set incorrect 'else  {    alert (' through ') ;}

customerror Status

This state is true if the element has a custom error set using the Setcustomvalidity () method.

if (Uname.value = = " ) {    uname.setcustomvalidity (' user name cannot be null ');} if (uname.validity.customError) {    alert (' validation failed ');}

HTML5 Form Validation