PageResource.com - Web Development Tutorials

HTML5 Input Validation Tutorial

 

Automatic validation is another way in which HTML5 reduces the amount of scripting needed to create dynamic websites. With several of the new HTML5 <input> 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.

Here is what happens when you enter text other than an email in the <input> type email.

Here is what happens when you enter text other than a URL in the <input> type url.

Prompting Required Fields

The new required attribute allows you to highlight mandatory inputs.

Full Name: <input type= "text" name= "" required= "required" />

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: <input type= "text" name= "area_code" pattern= "[0-9] {3}"  title= "Three digit area code."/>

Here is what happens when you enter the wrong text.

The pattern attribute can be used with <input> types, text, search, url, telephone, email, and password.

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: <input type= "number" name= "five_steps" max= "30" min= "0" step= "5" value= "10" />

Here is what happens when a user enters a value greater than your specified max value 30.

Here is what happens when a user enters a value less than your specified min value 0.

Leave a Reply


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy