Validating iframes

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.

validating iframes-74validating iframes-68validating iframes-62

Strictly speaking, you should make sure you're using the HTML5 DOCTYPE, otherwise you'll run into HTML validation errors.

But the great thing about them is that they all degrade gracefully.

So if an older browser doesn't support them, the fact that they're in the HTML won't 'break' anything, they’ll just be rendered as an NB While client-side form validation is great for enhancing user experience—fast, instant feedback to the user without making a round trip to the server—you will still need to validate any data submitted on the server, too.

Let's walk through an example of how we can validate a form using only the browser's built in validation.

Take this simple booking form: attribute for the label tag matches up with the id attribute of the associated input tag.

This keeps our HTML semantic, with the labels helping to give meaning to the input controls.

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.

I’m also using the WAI ARIA attribute now, so if we leave ‘required’ in the label tag screen reader users will have ‘required’ read to them twice, which they could find rather annoying.

A word of warning though: not all browsers implement the attribute accessibly, so it might not be picked up correctly in certain browser / screen reader combinations.

As such, current best practice recommends supplementing the required attribute with the aria-required=”true” attribute: Now that our users get prompted to complete required fields, we need to make sure that the data they submit is in the format we require.

Tags: , ,