Form validation is a common thing in web applications. First we concentrate on server side validations, next to increase user interactivity of application, we go for client side validations using javascript, jQuery, etc. Now HTML5 and CSS3 are gradually evolving. HTML5 offers new input types and attributes that makes validation much more easier using CSS3 pseudo classes..
Pseudo classes : A pseudo-class is information about an element that’s in the document tree but not available through any specified attributes. For ex. :first-child pseudo class applies to all elements that are first child of their parents. Many pseudo classes are present in CSS2.1 like :nth-child, :active, :hover, :visited, etc.
Now CSS3 provides some more pseudo classes using which we can preform form validation by styling form fields in various states without writting long lines of javascript codes. Some of the pseudo classes are :
- valid
- invalid
- required
- optional
- in-range
- out-of-range
- read-only
- read-write
- Demo
In this input type we can easily detect whether the user has entered correct information using attribute selector with :valid pseudo-class.
input[type=email]:valid {/* appearance to indicate valid entry */}
or for all input types
input:required:invalid {/* appearance to indicate valid entry */} We can also add an error message if the user input is not in correct format like: input[type=email]:invalid:after{content: “Email is not valid!”} We can use this technique for any input types and can display our customised styling for valid and invalid entries. By using this technique we can get avoid many lines of javascript code for form validations. But this technique has drawback of browser compatibility. Old browsers that don’t support HTML5 and CSS3 features may not give correct output. In that case we may need a backup of scripts for validations.
I hope this helps and here are some website references from where you can get to know more details about this topic.
http://html5doctor.com/css3-pseudo-classes-and-html5-forms/ http://www.alistapart.com/articles/forward-thinking-form-validation/ http://demosthenes.info/blog/462/Goodbye-JQuery-Validation-HTML5-Form-Errors-With-CSS3