Validating user input in html

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.

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.

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.

Ian Oxley has been building stuff on the Web professionally since 2004.

validating user input in html-49

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

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?

For a more detailed introduction to HTML5 form validation you can find some great articles linked under References below.

In this article we intend to present only a number of simple examples to get you started, covering the basic form elements.

Leave a Reply