HTML and CSS Reference
In-Depth Information
alert("Age value too small");
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
Returns true if validation is performed via custom error techniques.
Returns true if a control has a pattern attribute set and the control value
doesn't match the pattern.
Returns true if an input type contains a value smaller than the max value.
Returns true if an input type contains a value smaller than the min value.
Returns true if an input type contains a value not in accordance with the
step value.
Returns true if data entered in a control exceeds its maxLength value.
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.)
Returns true if a control contains valid value, or false otherwise.
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
Search WWH ::

Custom Search