HTML 5 and CSS3 Form Validation:-
HTML5 get a major upgrade with the addition of simple form validation attributes. To support these validation attributes CSS3 has added some pseudo selectors styling controls based on state of validation.
Adding Validation:-
To get the detailed knowledge of new attributes and input types. Here we create a sign up form which is mostly same. You fill the required details and tap on submit to send It. How many time the user has been reset the form after you have missed a mandatory value or not given a strong password.
To stop this, the first attribute we make use of is required attribute. Adding the required attribute to the input box will prevent submission of form without filling up value in the field.
The Next attribute we add in the form is autofocus attribute. This attribute will helps in automatically assigning the focus to the form while the page loads. This attribute will enhance the performance and grows the customer engagement.
The Next attribute we will use is Placeholder attribute. This adds a sample value or hint in the input field. Depends on the browser compatibility clicking or typing will automatically hide it but it will reappear again if the value is again empty.
HTML5 has also invented new input type attributes, The first one which is mostly used is email type. This will do the basic validation on the email value and ensure that it meets the standard format.
Another new input type attribute is Url type, as with email type it assures that the url is using in the valid format with http:// or https:// strings.
The Final attribute for which we are looking for is pattern attribute. This will allows you to specify a regular expression that will used to validate the input value. It offers you a few options to do something powerful client side validations. For example in this input type we make sure that the password field has one uppercase letter , one lowercase letter and one special or numeric characters.
Customizing Validation Styles:
CSS3 has introduced some new pseudo selectors to help form styling based on validation state. We are looking at the following attributes.
- :invalid
- :valid
- :required
- :optional
Using these pseudo selectors you can give the visual guide to know which field contains error in the form.
Server-Side Validations:
While its good that client side validation improved the performance in HTML5 but don’t forget that you still need to use server side validation.