HTML and CSS Reference
In-Depth Information
Figure 2.9. When the user enters a quantity for an item, the application multiplies it by the price for that item to
get the total, then adds up all totals to get the overall order total.
Your form now has the ability to compute totals and validate data, but what if you want
to provide additional validation functions with custom error messages? In the next section,
you'll extend the validation of the form to perform custom validation using the Constraint
Validation API and to style invalid fields using CSS3.
2.4. Checking form input data with the Constraint Validation API
Earlier in the chapter, you learned about some of HTML5's new validation features—the
required
,
pattern
, and
min
and
max
attributes—that enable the browser itself to per-
form native validation on form input fields without requiring any additional JavaScript.
These attributes are only the beginning when it comes to HTML5 validation—the Con-
straint Validation API offers many more possibilities.
In this section, you'll learn
• How to use validation properties and methods to design custom validation tests
• How to use the
invalid
event to detect invalid fields on a submitted form
• How to use the new pseudo-class selectors in CSS3 to apply styling to invalid
fields without adding redundant class names to your input elements
The Constraint Validation API defines new properties and methods you can use to detect
and modify the validity of a given element. Using this API, you can provide additional val-
