HTML and CSS Reference
In-Depth Information
As you can see, your message is displayed if the field fails the
validity
check. In this case the required attribute was set on the text field like this:
<input id="fullname" type="text" required>
Also, for the
oninvalid
event to fire, the form must be submitted; see
more on this in the section “Triggering validation with JavaScript.”
Note that the first step in the function in the preceding code
snippet resets the custom validity message to an empty
string. This is because setting the custom validity message
forces the valid status to be false. It will be impossible to
submit the form after the error if the message isn't reset.
Overriding the
invalid
event on the form element in question lets you
take more complete control of the user experience while still taking
advantage of built-in validation.
Check the validity property in the
DOM
, and add your own code to
report the validity status:
var fldEmail =
document.getElementById('email');
fldEmail.addEventListener(
'invalid',
function(event) {
alert(
"You can't fool me, " +
"that's not a valid email"
);
event.preventDefault();
}
,false);
This code assumes you have a submittable form with an input like this:
<input id="email" type="email">
The browser will fire the invalid event when the form is submitted and
there is text which is not a valid email address in the field. Note that the
