Form validation using HTML5:

Form validation using HTML5

The fields in a form are there to gather information from your visitors, but no matter how much time you spend setting up your form there is going to be at least some of your visitors who gets confused filling out your form, might skip important parts of your form, type invalid values (who has ever heard of an email address with a space in it?) and the result? They click submit and you end up getting a whole lot of more or less useless data.

And this is where validation enters – if you validate your inputfields before the data is sent to your inbox or database, then the visitor gets a chance to correct the data and this means that the chance of you getting the data you actually asked for, improves.

For years this have been done with JavaScript and done correctly, this works to perfection. So why change that you might ask? Because the guys behind HTML5 have introduced new, simpler ways of validating your data, that does not require several lines of JavaScript, but let the browser do the validation client-side. And the best part about it is that it is very easy to implement - all you need to do is add the right attribute here and there.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!