Working with Forms and Controls - HTML5 Programming for ASP.NET Developers - page 141

alert("Age value too small");
}
evt.preventDefault();
}

As you can see, the jQuery bind() method binds the invalid event handler for the two <input> fields.
The OnInvalid() function gets the ValidityState object via the validity property of the input field. The
ValidityState object provides several pieces of information about the current validity status of an input
field. Table 5-3 lists the properties of the ValidityState object that can be used.

Table 5-3. ValiditySta te Properties

Property Description

customError Returns true if validation is performed via custom error techniques.

patternMismatch Returns true if a control has a pattern attribute set and the control value

doesn't match the pattern.

rangeOverflow Returns true if an input type contains a value smaller than the max value.

rangeUnderflow Returns true if an input type contains a value smaller than the min value.

stepMismatch Returns true if an input type contains a value not in accordance with the

step value.

tooLong Returns true if data entered in a control exceeds its maxLength value.

typeMismatch Returns true if a control contains data not that doesn't matching the

required format (e.g. emaile-mail, URLs, number, and so on etc.)

valid Returns true if a control contains valid value, or false otherwise.

valueMissing Returns true if a control marked as “required” doesn't contain any input.

The code then displays an alert box with a customized validation message. The browser's default
validation message is suppressed by calling the event object's preventDefault() method. If you don't
prevent the default action using a preventDefault() call in addition to your alert box, the browser's
validation error message callout is also displayed, which is unnecessary in most cases.
Figure 5-17 show a sample run of the code.

Figure 5-17. Customized validation message from the invalid event handler