HTML and CSS Reference
In-Depth Information
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 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
Input Field
Validation Rules
Required
Maxlength is 65 characters.
Name
Required
This must be in the following format: 000-000-0000
Phone
Required
This must be a valid e-mail address.
Restaurant Required
Booking Time Required
Email
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.
Guests
