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)
Example-2 (input text field with pattern 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.
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.
