HTML and CSS Reference
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 sur-
prised 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 in-
put 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 ensure that you don't miss anything.
Table 7-1 Input Validations
Maxlength is 65 characters.
This must be in the following format: 000-000-0000
This must be a valid e-mail address.
Booking Time Required
The maximum number of guests is 12.
The minimum number of guests is 1.
Message Maxlength is 250 characters.
Table 7-1 shows that all the form fields are required, with the exception of the message. Some of these form fields also
have validations for their length.