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.
The bad news is that it is only partially supported in Safari, and isn't supported at all on i OS Safari, or the default Android browser.
It also means that if you click the label, the associated input tag receives the focus.
They also help with accessibility, as the text in the label will be read out to screen reader users: it can therefore be useful to indicate required fields by adding ‘required’ to the label text, as I’ve done above.
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.
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.
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 make sure our user enters the right data in the email, website, and number of tickets fields, we can use some of the new input types added in HTML5: By specifying the appropriate type, our browser will validate the data for us and make sure we've got an email address in the email field, a URL in the website field, and a number in the number of tickets field.
If the user enters anything less than 1 or greater than 4, they'll be prompted to enter a number in the permitted range.
In tandem with the new input types and attributes provided by HTML5, CSS3 gives us some new pseudo-classes we can use to provide visual clues to the user as to which form fields are required, which are optional, and which contain validation errors.
Required fields can use the Now, in addition to showing the help text when the input field receives focus, we'll also show the help text when the input field's value is invalid.
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.