HTML and CSS Reference
In-Depth Information
color: #fff;
background-color: #242a59;
border: 2px solid #f00;
}
Figure 5-16 shows a sample run of a web page with some invalid data.
Figure 5-16.
Validation pseudo-classes in action
Notice how the Email text box picks up the
input:invalid
class because the field's value doesn't meet
the format of a valid e-mail address. Along the same lines, the Age text box picks up the
input:out-of-
range
class when the age exceeds a maximum limit.
Customizing Validation Messages Through Code
After performing validations, the HTML DOM raises an
invalid
event for all input fields that violate
validation rules. You can trap the
invalid
event and write custom code to suppress the default validation
messages and display your own. In the
invalid
event handler, you can use the
ValidityState
object to find
out more about the error. Listing 5-15 shows how this can be accomplished.
Listing 5-15.
Handling the
invalid
Event
$(document).ready(function () {
$("#txtEmail").bind("invalid", OnInvalid);
$("#txtAge").bind("invalid", OnInvalid);
});
function OnInvalid(evt) {
var input = evt.target;
var validity = input.validity;
if (validity.typeMismatch) {
alert("Invalid email address");
}
if (validity.rangeOverflow) {
alert("Age value too big");
}
if (validity.rangeUnderflow) {
