HTML5 input validation

Automatic validation is another way in which HTML5 reduces the amount of scripting needed to create dynamic websites. With several of the new HTML5 types, the browser can validate the users’ inputs.  You no longer have to use scripts to instruct your users to enter the correct type of input. For example, with the input types, email and URL, the browser can automatically instruct the user to enter a valid email or a valid URL if they enter the wrong type of input.
 

Prompting Required Fields

The new required attribute allows you to highlight mandatory inputs.

Full Name:

The browser will prompt the user to fill the required field if the user tries to submit the form without filling out that section.

Validating Pattern

The input attribute pattern gives you the additional option of setting a specific pattern for the browser to validate. For example you can set the attribute to validate a three digit area code. In order to do this you would set the pattern attribute to accept the digits 0-9 in sets of 3. You can use the title attribute to give your users specific instructions.

The pattern attribute can be defined using “regular expressions.”  For a three digit code this would be [0-9] {3}

pattern= “[0-9] {3}”

title= “Three digit area code.”

Here is how it looks as markup.

Area Code:

Prompting Number Values

The number attribute lets you specify the range of values that are acceptable and prompts the user to select the right range.

Lets us go back to the example

Number: