The HTML5 specification lists several attributes we can use to validate user input on the client side, so we can catch simple input errors before the user sends the requests to the server. We’ve been able to do this for years using JavaScript, but HTML5 forms can use new attributes to specify the behavior.
We can ensure that a user has required a form field by adding the required attribute like this:
<label for=”name”>Name</label>
<input type=”text” name=”name” autofocus required id=”name”>
Browsers can then prevent the form from submitting and display a nice error message, and we don’t have to write a single line of JavaScript validation. Opera does this right now
This lets users fail early, without waiting for a server response to find out whether they made a mistake. This behavior could be disabled or unavailable or just simply not correctly implemented, so you still need to make sure you have a server-side strategy for validating data. It’s definitely something to start thinking about now, though, because you can then easily locate the required fields and style the interface with CSS so that the required fields stand out from the rest.
You can take this one step further with the pattern attribute, which lets you specify a regular expression to ensure that the content meets your criteria.
<label for=”name”>Name</label>
<input type=”text” name=”name” autofocus required id=”name”>
Although no current browser uses this through the user interface, using this markup as the basis for a JavaScript validation library would be easy to implement.