You are previewing HTML5 Foundations.

HTML5 Foundations

Cover of HTML5 Foundations by Matthew West Published by John Wiley & Sons
O'Reilly logo

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 ...

The best content for your career. Discover unlimited learning on demand for around $1/day.