HTML and CSS Reference
In-Depth Information
A jQuery
attribute ends with
selector is used to select
btnUpdate
. This is necessary because the Update
button is part of
EditItemTemplate
, and
FormView
assigns a unique name to the constituent controls (for
example,
FormView1$btnUpdate
). The first block of code essentially calculates the difference between
HireDate
and
BirthDate
. If this difference is less than 0, it indicates that the age is less than 18. If so, a
custom error message is added by calling the
setCustomValidity()
method on the
BirthDate
text box.
The second block of code validates the telephone number. It does so by matching the entered value
against a regular expression. Notice the use of
test()
, which performs pattern matching. The
test()
method returns
false
if the value doesn't match the pattern. In that case, the
setCustomValidity()
method
is called to set a custom validation message.
CSS Pseudo-Classes
Finally, you need to add a few pseudo-classes to highlight validation errors. These pseudo-classes are
found in
StyleSheet.css
and are shown in Listing 5-25.
Listing 5-25.
Pseudo-Classes for Validation Errors
input:invalid {
background-color: #ffd800;
border: 2px solid #f00;
}
input:required {
background-color: #fff;
border: 1px solid #ff6a00;
}
The
invalid
pseudo-class is applied to all invalid input fields, whereas the
required
pseudo-class is
applied to all input fields for which the
required
attribute is set.
That's it! Figure 5-24 shows a sample run of the web form with a validation error.
Notice how the web form validates the Home Phone field upon form submission. Home Phone needs
to be in the form (123) 123-1234. However, because the last part of the entered telephone number contains
five digits rather than 4, the validation error is displayed.
