HTML5 Form Validation and HTML5 Pattern attribute

Validation: validation is the process of ensuring that the user-supplied content contains only  clean, correct and useful data as per decided rules.

We can classified validation into two types:-

1.   Required means data input is must with required attribute:

Ex: <input type="text" name="username" required />  //Here in form name must be entered.

2.   Data specific text input field as 'required': Here entered data must be belong to specific type like email filed must contain @ sign and number field cannot have alphabet etc.

Ex: <input type="number" name="age" required />   // It accept number only

This is where HTML5 really gets interesting and more useful. Along with the text input type, there are now a host of other options, including email, url, number, tel, date and many others.

Now We will learn about Pattern Based validation: HTML5 introduce new pattern attribute, which are used to specify content pattern for field. Pattern is basically regular expression that the field value is checked against. Regular expressions are a language used for parsing and manipulating text.

Following Example will help you understand the above pattern based validation:-

Example-1 (input text field without validation)

above example contain a simple textbox without validation. so when you enter whatever at the place of name and press enter for submit, it will submit the form because no validation is applied only required to enter something.

Example-2 (input text field with pattern validation)

in this example we have used pattern attribute and regex "[a-z]{3,15}" is applied. which means username must have alphabet character between a to z and it consists with min 3 character and maximum 15 character.

Example-3 (input text field with pattern validation and Custom Validation Message)

Above example have only a new attribute title which will show the message with default validation popup.

Example-4 (Replacing the Default Validation Message)


In this example the only difference is that here we override the default oninvalid event of input element. In first line we get the input element and in second line we override the event and set  custom validation message.