HTML and CSS Reference
In-Depth Information
• Use JavaScript/jQuery code to customize the way validation messages for input
fields are displayed.
The former technique is suitable in situations where you wish to customize the appearance of an
input field and you aren't interested in changing the way validation messages are displayed. The latter
approach gives you total control over how and where validation messages are displayed. It involves
handling the input field's
invalid
event and writing custom logic to display validation messages.
Customizing the Appearance of an Input Field
Using CSS Pseudo-Classes
Whenever there is a validation error, the browser pops up a callout that displays the validation error
message (see Figure 5-2). Although browsers don't allow you to customize the appearance of the validation
message callout, you can customize how an input field looks when a validation rule is broken. The trick is
to write specific CSS pseudo-classes.
n
Note
A CSS
pseudo-class
is a class that is applied to elements based on their state. For example, an anchor
(
<a>
) tag has pseudo-classes
link
,
visited
,
hover
, and
active
, which represent the corresponding state of a
hyperlink. The CSS pseudo-classes discussed in this section come from the CSS3 specification.
Table 5-2 lists the pseudo-classes you can use with HTML5 validations.
Table 5-2.
Pseudo-Classes for Customizing Input Fields
Pseudo-Class
Description
valid
Applies to input elements that contain valid values.
invalid
Applies to input elements that contain invalid values.
in-range
Applies to input elements whose value is between the
min
and
max
values.
out-of-range
Applies to input elements whose value is outside the
min
and
max
limits.
required
Applies to input elements that are marked as required.
optional
Applies to input elements that aren't marked as required.
Listing 5-14 uses many of the CSS pseudo-classes mentioned in Table 5-2 to customize the
appearance of input fields in the event of validation errors.
Listing 5-14.
Sample Pseudo-Classes to Customize Input Fields
input:invalid {
background-color: #ffd800;
border: 2px solid #f00;
}
input:required {
background-color: #ffd800;
border: 2px solid #f00;
}
input:out-of-range {
