HTML and CSS Reference
In-Depth Information
To test the
email
field:
◗
1.
Click the input box for the
email
field and change the text of the e-mail address
to
Alice Nichols
.
◗
2.
Click the
Submit My Survey
button.
◗
3.
The browser rejects your text entry because it does not match the pattern of an
e-mail message. Figure 6-69 shows the appearance of the error message in the
Firefox browser.
figure 6-69
entering an invalid e-mail address
invalid e-mail
i
l
address
◗
4.
Change the text of the input box back to
alice.nichols@redballpizza.com
an
d
re-submit the form. Verify that no validation errors are reported.
A browser that supports the
date
data type also rejects invalid dates if they are not in
the form
yyyy-mm-dd
. However, a browser that supports the
date
data type also pro-
vides a calendar widget to allow for the easy submission of valid dates. Currently, only
the Google Chrome and Opera browsers provide validation checks on date values.
Testing for a Valid Pattern
Several fields in the survey form are required to follow a specified pattern of characters.
For example, the receipt numbers from Red Ball Pizza all follow the pattern
re-
nnnnnn
where
n
is a single digit. Thus, a receipt labeled re-123456 would be considered valid,
but receipt numbers such as 123456 or re-1234 would not. Other field values are
limited to a set of possible character patterns. A U.S. phone number might be entered
as (386) 555 - 7499, or 555-7499, or 3865557499. United States postal codes can be
entered as 32175, or in the nine-digit format as 32175-6316. However, a phone number
would not be valid without at least seven numbers, and a postal code would not be valid
if it were written with other than five or nine numbers.
To test whether a field value follows a valid pattern of characters, you can test the
character string against a regular expression. A
regular expression
or
regex
is a concise
description of a character pattern. It is beyond the scope of this tutorial to discuss the
syntax of regular expressions; but to validate a text value against a regular expression,
add the attribute
pattern=”
regex
”
to the control element, where
regex
is the regular expression pattern. For example,
the following code tests the value of the
receipt
field against the regular expression
^re\-\d{6}$
:
<input name=”receipt” pattern=”^re\-\d{6}$” />
This regular expression will cause browsers to reject any value for the
receipt
field
that is not exactly in the form
re-
nnnnnn
, where
n
is a single digit.
