HTML and CSS Reference
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.
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
border: 2px solid #f00;
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.