HTML and CSS Reference
In-Depth Information
FIGURE 3.11
Opera rendering the
default validation message for email.
FIGURE 3.12
Opera rendering our
custom “speak like a pirate day”
validation.
However, if the way the custom validation messages work isn't
your bag, then there is a way to roll your own validation behav-
iour, to make it feel more integral to your application. When we
run
setCustomValidity
it sets the read-only DOM attribute called
validationMessage
. We can use this if we manage validation our-
selves, which we'll look at in the next section.
Along with the content attributes that enable client-side valida-
tion and web form widget goodness, as with most of the HTML5
specs, there's an accompanying JavaScript API that gives us
complete control over how our form is validated and submitted.
Using the JavaScript API we can control how we present valida-
tion feedback to our visitor, but we can still defer all the actual
validation code to the new forms APIs. We can also use the API to
narrow down exactly why a particular form field failed to validate.
Forcing element validation
All form elements and input elements (including
<select>
and
<textarea>
) include a
checkValidity
method on the DOM node.
Yo u ' d b e f o r g i v e n f o r t h i n k i n g t h i is i is t h e m e t h o d y o u ' d w a n t t o u is e
to override the browser's default validation and feedback process.
The
checkValidity
method returns true or false depending on
the success of the validation checks, but at the same time it's
