If you need to support older versions of IE prior to IE10 you won't find any of those support form validation either.
So, what can you do if you have to support browsers that don't have support for form validation yet?
A few months ago Sandeep introduced us to the HTML Constraint API, showing how we can use the new HTML5 input types and attributes to validate our forms in the browser with minimal Java Script.
Today I’m going to walk you through validating a simple booking form by using the Constraint API, and keep an eye on how you can make sure your forms stay accessible too.
Another option would be to continue to use solely Java Script for your client-side validation, and not add any of the new features discussed above.
A third approach is to use Java Script to detect whether the browser supports form validation, use it if it does, and fall back to Java Script-based validation if it doesn’t.
To recap—or in case you haven’t read Sandeep’s article—with the dawn of HTML5, a raft of new input types and attributes were added to tags that allow the browsers themselves to perform the client-side validation for us: no Java Script required.
To start using the new input types and attributes, you don't really need to do anything other than start using the new input types and attributes.
This keeps our HTML semantic, with the labels helping to give meaning to the input controls.Libraries such as Modernizr can help with HTML5 feature detection, but you can always write your own code if you don't want to include another Java Script library: In this article we've walked through applying HTML5 form validation to a booking form client-side without using any Java Script, and pointed out some accessibility issues to be wary of.We then looked at how new CSS3 pseudo-classes can be used to give visual cues to the user as to which fields are required and options, and which contain valid or invalid data.Ian Oxley has been building stuff on the Web professionally since 2004.He lives and works in Newcastle-upon-Tyne, England, and often attends local user groups and meetups. When he's not in front of a computer Ian can be found playing guitar, and taking photos.
After making all these changes our HTML now looks like this: https://jsfiddle.net/ianoxley/9C2JD/ The good news is that HTML form validation is supported by all the latest desktop browsers, and most mobile browsers.