Peter Lubbers - Pro HTML 5 Programming

CHAPTER 7 ■ USING THE HTML5 FORMS API
customError
Purpose: Handle errors explicitly calculated and set by the application code
Usage: Call setCustomValidity(message) to put a form control into the customError state
Usage example: passwordConfirmationField.setCustomValidity("Password values do not match.");
Details: For those cases where the built-in validity checks don’t apply, the custom validity errors can
suffice. Application code should set a custom validity message whenever a field does not conform to
semantic rules.
One common use case for custom validity is when consistency between controls is not achieved, for
example if password confirmation fields don’t match. (We’ll delve into this specific example in the
“Practical Extras” section.) Whenever a custom validity message is set, the control will be invalid and
return the customError constraint as true. To clear the error, simply call setCustomValidity("") on the
control with an empty string value.
Validation Fields and Functions
Together, these eight constraints allow a developer to find out exactly why a given form control is failing
a validation check. Or, if you don’t care which specific reason is causing the failure, simply access the
Boolean value valid on the ValidityState; it is an aggregate of the other eight constraints. If all eight
constraints return false, then the valid field will return true. There are a few other helpful fields and
functions on the form controls which can assist you in programming for validation checking.
The willValidate Attribute
The willValidate attribute simply indicates whether validation will be checked on this form control at
all. If any of the above constraints—e.g. the required attribute, pattern attribute, etc.—are set on the
control, the willValidate field will let you know that validation checking is going to be enforced.
The checkValidity Function
The checkValidity function allows you to check validation on the form without any explicit user input.
Normally, a form’s validation is checked whenever the user or script code submits the form. This
function allows validation to be done at any time.
■ Note Calling checkValidity on a form control doesn’t just check validation, it causes all resulting events and
UI triggers to occur just as if the form had been submitted.
The validationMessage Attribute
This attribute isn’t yet supported by any current browser versions, but it might be by the time you read
this. The validationMessage attribute lets you query programmatically a localized error message that the
browser would display based on the current state of validation. For example, if a required field has no
183