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
- search
- url
- password
- date
- datetime
- month
- week
- time
- datetime-local
- number
- range
- color
Let’s understand each step by step in depth:
- 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 2 3 | <input type="search" /> |
- 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 2 3 | <input type="url" /> |
- 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 2 3 | <input type="email" /> |
- 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 2 3 | <input type="password" /> |
- Date Input Type
The date input type is used to add a date picker to the form. enter numbers in the input box
1 2 3 | <input type="date" /> |
- 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 2 3 | <input type="month" /> |
- 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 2 3 | <input type="week" /> |
- 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 2 3 | <input type="time" /> |
- 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 2 3 | <input type="number" /> |
- 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 2 3 | <input max="10" min="1" type="range" /> |
- 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.
1 2 3 | <input type="color" /> |
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
- 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 2 3 4 5 6 7 8 9 10 11 | <form><input required="" type="text" value="" /> <input type="submit" value="Submit" /></form>Here is a code example showing <form> <div><label for="name">Name:</label> <input id="name" name="name" required="" type="text" /></div> <div><label for="email">Email:</label> <input id="email" name="email" required="" type="email" /></div> <div><button>Submit</button></div> </form> |
- 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
1 2 3 | <input pattern="[-0-9]+" required="" type="text" /> |
This attribute is mainly useful to allow only accept correctly formatted values.
- 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 2 3 | <input min="18" name="age" required="" type="number" /> |
- 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.
1 2 3 | <form action="" method="post" novalidate=""></form> |
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.
1 2 3 4 5 6 | <form novalidate=""> <input required="" type="text" /> <input type="submit" value="Submit" /> </form> |
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
1 2 3 4 5 6 7 8 9 | input:focus:invalid{ border:solid 2px #F5192F; } input:focus:valid{ border:solid 2px #18E109; background-color:#fff; } |
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.
