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 =;
var validity = input.validity;
if (validity.typeMismatch) {
alert("Invalid email address");
if (validity.rangeOverflow) {
alert("Age value too big");
if (validity.rangeUnderflow) {
Search WWH ::

Custom Search