HTML and CSS Reference
In-Depth Information
idation functionality and use custom error messages. The API allows you to detect whether
a field has an error and, if so, what type of error and what error message you'll display. It
also provides a method that allows you to set your own custom validation message that will
be displayed natively by the browser.
Constraint Valida-
tion API
5.0 [ * ]
10.0
4.0
10.0
10.0
* Indicates partial support; although Safari 5.0 supports the Constraints Validation API, it doesn't currently enforce
it automatically and display inline error messages like other browsers do.
In this section, as you continue working on this chapter's sample application, you'll walk
through two steps:
• Step 1: Add custom validation and error messages to input fields.
• Step 2: Detect form validation failure.
Also, although you won't have to do any coding because we've already provided the full
CSS file for the sample application, at the end of the section we'll show you how to style
invalid fields using CSS so you'll be prepared to do so in your own apps. First up, let's
explore and use some of the Constraint Validation API's properties and methods.
2.4.1. Creating custom validation tests and error messages with the setC-
CustomValidity method and the validationMessage property
When a validation function isn't supported by a browser or by HTML5, the application
will have to implement a custom validation test. In these cases, you'll have to write some
JavaScript to test the validity of the entered data and provide a custom error message
when the validation fails. The Constraint Validation API simplifies the implementation of
 
Search WWH ::




Custom Search