HTML and CSS Reference
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.