Back to Top

How to use HTML5 Constraint Validation

HTML5 Constraint Validation

Nowadays form validation is a must and we use both client side and server side validation.For client-side validation, we mostly use Javascript.Javascript Form validation is causing headaches because you need to write code for each and every validation or you should go with Javascript Plugin.You can avoid these headaches with HTML5 form validations. If you’ve ever used form validation using HTML5 so, you’ll agree that this is a very amazing and easy way than the Javascript.Earlier, You have learned about Canvas in HTML5.

HTML5 provides very useful feature is the built-in validation.Now client side validation will take care by the browser and no need to write Javascript code for it.The new HTML5 form features are pretty clean, straightforward and easily understandable.

HTML5 introduced following new input types which will accept only a specified kind of data in input box

  1. search
  2. url
  3. email
  4. password
  5. date
  6. datetime
  7. month
  8. week
  9. time
  10. datetime-local
  11. number
  12. range
  13. color

Let’s understand each step by step in depth:

  1. Search Input Type

The search input type is used to add a search box to the form.There is no validation with this type.

  1. Url Input Type

The URL input type is used when you want the user to enter valid URL and validate when submitting the form.

Also Read: Run-Time Validation using jQuery

  1. Email Input Type

The email input type is used to allow the value must be a valid email address.It validates field when submitting the form

  1. PassWord Input Type:

The password input type is used to secure data entered by the user.It will not display and also browser not store the password value entered.

  1. Date Input Type

The date input type is used to add a date picker to the form. enter numbers in the input box

  1. Month Input Type

The month input type is used to allow the user to pick a month.IT will validate when submitting form that user has selected a month and year only.

  1. Week Input Type

The week input type adds a date picker to the browser that allows the user to select a week of a year.

  1. Time Input Type

The time input type is allow you to add a time picker to the form.It wil validate that user entered time only.

  1. Number Input Type

The number input type is used when you want to allow to enter the number only and validate when submitting form.

  1. Range Input Type

This is very nice type added.It is used to add slider which allow to pick from a range of numbers.Just see demo and you will get it. It is mostly used for price selection.

  1. Color Input Type

The color input type is used to add a color picker to the form which allow the user to select a color and add HEX value to the input.There is no validation for this input type, it will just add a color picker.

HTML5 attributes

HTML5 supports attributes like min, max, step, pattern, and required as well as existing attributes max length which is used to constrain data

  1. Required

The required attribute is used to add into form fields and it tell the user that requires to enter data into that field before submitting the form.

Basic Example:

Here is a code example showing
  1. Patterns

HTML5 pattern attribute is used to allow regular expression which will match against the user supplied input before submitting the form.Here I am going to share attributes used for validation

This attribute is mainly useful to allow only accept correctly formatted values.

  1. Min and Max Limit and Max length:

Here you can set basic limitations like the max length of field value allowed or I can say it restrict the number of characters to type in the field.Minimum and maximum values for number fields. Max length usage is same as before.

  1. novalidate

It is used to remove HTML5 Validation.HTML5 validation is great and also make things easier for you in the form development but if you want to turn off HTML5 validation from the form by simply adding a novalidate to the form tag.

Suggested Read: Simple Anti-Spam Captcha

The boolean novalidate attribute can be applied to form nodes. When present this attribute indicates that the form’s data should not be validated when it is submitted.

Because the above form has the novalidate attribute it will submit even though it contains an empty required input.

Style Form Message:

CSS3 pseudo-classes is used for applying CSS to the validation message. You can modify its style of message.

Let’s see the css3 pseudo classes:



HTML5 attributes can be easily styled using CSS. Here I am going to show you to change color of each input field when it is valid or invalid

     border:solid 2px #F5192F;
   border:solid 2px #18E109;

Copy above code and paste directly to the CSS style sheet.

So that’s it, If you have any questions or feedback, please let me know in the comments below, or email me at [email protected]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How to crop an Image using Imagick in PHP

Posted on 4 years ago


How to Create and Use Cookies in PHP

Posted on 2 years ago


MySQL coalesce() function

Posted on 7 years ago


How to display XML content with PHP

Posted on 6 years ago


Hello world

Updated 1 month ago

Nick Carter

In depth Understanding of Laravel Core

Updated 3 months ago


ECMAScript 6 New Features – 2

Updated 1 year ago


The Reader’s Poll – June 2015

Posted on 4 years ago


The Reader’s Poll – August 2014

Posted on 5 years ago


The Reader’s Poll – June 2014

Posted on 5 years ago


The Readers’ Poll – May 2014

Posted on 5 years ago


The Readers’ Poll – August 2013

Posted on 6 years ago