HTML and CSS Reference
In-Depth Information
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.
Note that if you like single-vendor markup, you can override
the error messages in Firefox using the proprietary
x-moz-errormessage
attribute
<input type=email x-moz-errormessage=”Please specify a
¬ valid email address.”>
So far we've seen how we can use a little JavaScript to custom-
ise the message the user sees when validation errors occur. If
you want to spice things up further, you can use JavaScript to
completely handle all the validation and feedback to the user.
Using the JavaScript Web Forms API, we can control how we
present validation feedback to our visitor, but we can still defer
all the actual validation heavy lifting code to the new forms,
APIs. We can also use the API to determine exactly why a par-
ticular 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 tell-
ing the browser to run through its checks, and displaying the error
messages if required. If you want to take control of the presenta-
tion of validation feedback, then you don't want to use this method.
