HTML5 Foundations

chapter seven

Validating Form Data Using HTML5

Collecting data from a user is one thing; making sure that data is what you wanted is another. If you’re asking for someone’s date of birth, you don’t want the name of his cat. This may sound silly, but you would be surprised what some people will decide to enter into your web forms.

HTML5 introduces a number of new features that you can use to validate data. You can now require an input to make sure that the user gives you something to work with. You can perform pattern (or format) validations to check that the data supplied by the user has been provided in a valid format (think e-mail addresses and URLs). You can also restrict the length of an input (this was feasible in HTML4) or restrict the possible values that can be submitted. All of these validation methods can help to make your life easier when it comes to processing the data.

Adding Validations to Your Bookings Form

Your bookings form currently makes use of built-in pattern validations introduced in HTML5 by using the email input type; however, you can do much more. In this section, you are going to apply a number of validations to your bookings form using the following attributes: required, maxlength, min, and max. You will learn about each of these attributes in more detail later in this section.

Before you start writing code, take a look at Table 7-1, which shows the validations that each of the fields will have. Planning out your validations in this way is useful to ...