HTML5 Form Validation

Form validation is an important thing we nee to do while creating a web based form. In early days, developers used server side form validation. Then it came client side form validation. Now with HTML5, we can easily validate a form. All modern browsers supports HTML5 form validation.

Although HTML5 has field validation feature, there are many developer who still do not know about this and use jQuery validation. In this, post I will describe how to use HTML5 form validation in your web application.

Read: Form Validation With JQuery and CSS

HTML5 Form Validation

For, client side validation, HTML5 introduces various kind of new INPUT elements with validation attributes  Below, I will explain all input types and attributes. For validation, you need to use proper input type with attribute and pattern. Here pattern is used to define a pattern of accepted values. It is optional but you need to know how to use it properly.

Input Types

Now, we have data specific input types. These input types are email, url, number, tel, date and many others. If you want to ask user’s email address, use this code to add HTML5 Form Validation for email field

Email Address: <input type="email" name="email" placeholder="email address">
Date: <input type="date" required />
Website: <input type="url" required />

Similarly you can use other HTML5 input types.

These are the input types and their use

• color – It allows users to color
• date – It allows users to select date
• datetime – It allows users to select date and time with timezone
• datetime-local – similar to last one by without timezone
• email – similar to text field but user should enter email
• month – It allows users to select a month
• number – It should contain a numeric value/
• range – It should contain value from a range
• search – It behaves like a regular text field but used for search box.
• tel – It will be used for telephone numbers
• time – For taking time
• url – It is for URL
• week – The week type allows the user to select a week and year.

Required Attribute

This is the attribute which must be add in the INPUT field if you want its value to be validated. If you add required, user must input some value in the field in order to submit form.

If you add required, it informs web browser that the field is mandatory.

<tr><td>Email</td><td><input type=”email” placeholder=”Enter Valid Email” required /></td></tr>

Email: <input type="email" placeholder="Enter Valid Email" required />

You can use this to al fields which are mandatory.

Name: <input type="text" placeholder="Enter Name" required />

INPUT patterns

This pattern is used while validation. see the pattern for URL input type.

input type=”url” pattern=”https?://.+”

Now see the password field validation below.

<input id="password" name="password" type="password" placeholder="Password" required pattern="(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])(?=.*[a-z]).*" /></td></tr>

If you want to take a look on a form with most of the validation, see the code below.

<form name="form1" action="">
<table>
<tr><td>Name</td><td><input type="text" placeholder="Enter Name" required /></td></tr>
<tr><td>Email</td><td><input type="email" placeholder="Enter Valid Email" required /></td></tr>
<tr><td>Password</td><td><input id="password" name="password" type="password" placeholder="Password" required 
pattern="(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])
(?=.*[a-z]).*" /></td></tr>
<tr><td>Date of Birth</td><td><input type="date" required /></td></tr>
<tr><td>Telephone</td><td><input type="tel" pattern="d{10}" required /></td></tr>
<tr><td>Website</td><td><input type="url" required /></td></tr>
<tr><td>Your fav. Color</td><td><input type="color" required /></td></tr>
<tr><td>Salary</td><td><input type="number" size="6" name="age" min="10000" max="20000" value="12000" required></td></tr>
<tr><td></td><td><input type="submit" value="Submit"></td></tr>
</table>
</form>

It will be shown like the snap below: