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
4. Change the text of the input box back to 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.
Search WWH ::

Custom Search