Html5 form validation

This post is about the HTML form validation and also a few types of input fields available in HTML5. There are a few additional types of input fields added in HTML5 for better performance and results.

Empty Field Validation:

To check whether the field is empty, just add an attribute reuired="required" to the input field. You can also write the attribute without any value.

Ex:
<input type="text" required="required" name="sample" /> or <input type="text" required name="sample" />

Email Validation:

For quick email validation entered by the user, just use the input field with type email instead of the type text.

Ex:

<input type="email" required="required" name="sample" />

URL Validation:

For url validation uses the input field with type url instead of the type text.

Ex:

<input type="url" required="required" name="sample" />

Mobile Validation:

For this you need to use an input field with type tel, limit the character entered in 10 and check the pattern entered.

For the detailed explanation of the mobile validation or pattern validation, click here.
Ex:
<input type="tel" pattern="[0-9]{10}" name="sample" />

Input Placeholder:

This is an attribute to an input field which may be used to guide the user for filling the form. The value of the placeholder attribute is a guide itself. The placeholder is not supported in the older browsers.Ex:
<input type="text" placeholder="Enter your name" name="sample" />

Autofocus Cursor:

This attribute is used for focusing the input fields on page loading by default.

Ex:
<input type="text" autofocus />

Spin boxes:

Spin boxes this type using to give the conditions. ex: 1 or 2

Ex:
<input type="range" min="0" max="10" step="2" value="6" />

Data Pickers:

Data picker this input type pick the date and time this value automatically pick the date.

Ex:
<input type="datetime" required />

 Search Box:

    This new input type search field similar to google and yahoo search engine based automatic search close icons including this search box. 
Ex:
<input type="search" required />

Color Picker:

   This also new implement in previously color pickers generate javascript coding, but now induced color picker just called input box type="color" pick the color value stored 

Ex:

<input type="color" required />