HTML5, JavaScript, and jQuery 24-Hour Trainer

Lesson 8

HTML5 Validation

When the user submits a form, it is common to perform validation of the data the user has entered within the browser. This allows any issues, such as missing data, to be resolved before the form is sent to the server, and generally provides a superior user experience.

Form validation has traditionally been performed with JavaScript: In fact, until recently this was the most common use of JavaScript within web pages. HTML5 provides built-in form validation, and allows fields to be validated based on attributes added directly to the fields themselves. This lesson will look at how you can enable validation on the form created in Lesson 6.

The HTML5 form validation specification is not perfect—it lacks some of the rules you would expect in a complete validation framework. It does, however, have the advantage of being a native solution and is very easy to use. It is therefore necessary to decide at the outset of a project whether HTML5 validation is sufficient, or whether you will use one of the many JavaScript libraries available—for instance, jQuery validation.

Adding Validation Rules

This section will add form validation to the contacts.html web page as it stood at the end of Lesson 7. If you would like to follow along, open this file now, or download it from the book's website.

The most common form of validation is specifying that a field is mandatory. You can indicate that the user is required to provide a value for a field by simply adding the ...