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:

  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:

:valid
:invalid
:required
:optional
:in-range
:out-of-range
:read-only
:read-write

Example:

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

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 info@creativedev.in.

Share:
Share on Facebook1

Share on LinkedIn0Tweet about this on TwitterShare on Google+0Buffer this pageDigg thisShare on Reddit0

Leave a Reply

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

Most Popular Posts

To parse CSV Data in PHP

Posted on 5 years ago

Bhumi

How to convert Object to array in PHP

Posted on 10 months ago

Bhumi

Introduction to the Instagram API

Updated 4 weeks ago

Bhumi

How to Use the HTML5 Full-Screen API

Updated 1 month ago

Bhumi

What are Lambdas and Closures in PHP?

Updated 1 month ago

Bhumi

MySQL REGEXP Operator

Updated 1 month ago

Bhumi

The Reader’s Poll – June 2015

Posted on 2 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 2 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 3 years ago

Bhumi