Sample HTML5 Validations

Some HTML5 validation samples are here. You can use it in your project.

• Limit the character count in text box. Here it's uses pattern attribute that is used to provide the Regular expression validation. So the ".{4,4}" is a regular expression that's allows only 4 character.

<input type="text" pattern=".{4,4}" name="username" id="username" value=""/>

• Allow only numbers in text box. Here it's uses pattern attribute that is used to provide the Regular expression validation. So the "\d*" is a regular expression that's represents decimal.

<input type="text" pattern="\d*" name="phonenumber" id="phonenumber" value="" />

• Required field validation for drop down list. If the selected field has no value means the validation will be triggered. In the below sample the "Select" field has empty value in the "value" attribute.

<select id="grade" name="grade"  required>
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

• Email validation. The following code has the type="email". So it will allow only email.

<input type="email" name="email" id="email" value="">

• Required field validation for text box. The following code has "required" attribute. That is used to provide this validation,

<input type="text" name="firstname" id="firstname" value="" required/>