HTML and CSS Reference
In-Depth Information
figure 6-71
entering an invalid postal code
postal code doesn't match
the pattern of a five- or
nine-digit postal code
Trouble?
If your browser does not reject the invalid postal code, it might not
support character pattern validation. Currently, only some versions of the Firefox,
Opera, and Google Chrome browsers support validation of character patterns.
◗
7.
Change the value of the
zip
field to
32175
and then resubmit the form. Verify
that the form is submitted without error.
◗
8.
Try entering values for the
phone
and
receipt
fields that do not match the char-
acter patterns for phone numbers or receipt numbers, verifying that the form is
rejected when invalid values are entered.
◗
9.
Enter
(386) 555-7499
for the phone field and
re-123456
for the receipt field and
submit the form.
You also can use HTML to define the maximum number of characters in a field using
the
maxlength
attribute
<input name=”
name
” maxlength=”
value
” />
where
length
is the maximum number of characters. This is not an HTML5 attribute and
thus
is
supported by all browsers. For example, to limit the value of the
zip
field to five
characters only, you'd enter the following HTML code:
<input name=”zip” maxlength=”5” />
Note that the
maxlength
attribute does not define what type of characters can be
entered into the
zip
field. A user could enter the text string
abcde
as easily as
32175
.
Applying Inline Validation
One disadvantage with the current validation checks is that they all occur
after
a user
has completed and submitted the form. It is extremely annoying for a user to go back to
an already completed form to fix an error. Studies have shown that users are less likely
to make errors and can complete a form faster if they are informed of data entry errors as
they occur. The technique of immediate data validation and reporting of errors is known
as
inline validation
.
Using the
focus
Pseudo-Class
One way of integrating inline validation into a Web form is to create style rules that
change the appearance of each control element based on the validity of the data it con-
tains. This can be done using some of the CSS3 pseudo-classes described in Figure 6-72.