HTML and CSS Reference
In-Depth Information
{ $("#divErr").append("Please enter Password Again!<br/>"); }
if (input.id == "Age") {
if (validity.valueMissing) {
$("#divErr").append("Please specify age!<br/>");
}
if (validity.rangeUnderflow) {
$("#divErr").append("Age must be between 18 and 100!<br/>");
}
if (validity.rangeOverflow) {
$("#divErr").append("Age must be between 18 and 100!<br/>");
}
}
}
evt.preventDefault();
}
The code from Listing 5-32 binds the
OnInvalid()
function as an event handler of the
invalid
event.
Look at the
OnInvalid()
function carefully. It uses the
ValidityState
object. First, the code checks whether
a control contains a valid value using the
valid
property. If a control contains an invalid value, its
id
property is checked and an error message is appended in
divErr
. Notice the validation for Legal Age: it
uses the
valueMissing
,
rangeUnderflow,
, and
rangeOverflow
properties.
That completes the User Registration page. Figure 5-27 shows how the page responds to HTML5
validations.
Figure 5-27.
HTML5 validations displayed by the
invalid
event handler
