Making sense of HTML5 - Build Windows 8 Apps with HTML5 and JavaScript - page 39

HTML5 browsers allow you to customize the error message by using the oninvalid attribute, as
shown below:
<form>
<input type="text" placeholder="Your PIN" required
oninvalid="this.setCustomValidity('PIN is mandatory')" />
<br />
<input type="submit" value="Enter" />
</form>
Note In general, you use the oninvalid attribute to specify any JavaScript code that should
run when the content of an input field is invalid, either when that field value was required
and left blank or when its content failed validation.
Validating against regular expressions
Table 2-1 lists popular new types of input fields supported by HTML5-compliant browsers. If your
page is expected to collect a date, then you can use an input date field; likewise, you can use a
numeric input field if you need to collect a number and so forth. But what if you intend to collect
data formatted in a specific way that none of the predefined input types can guarantee? For example,
what if you need users to enter a string with two letters followed by exactly six digits?
In HTML5, you can use the pattern attribute, as shown in the example below:
<form>
<input type="text"
placeholder="Your PIN"
title="2 letters + 6 digits"
pattern="[a-zA-Z]{2}\d{6}" />
<br />
<input type="submit" value="Enter" />
</form>
When you use the pattern attribute, Internet Explorer 10 requires that you also indicate the title
attribute—usually used to add a tooltip to most HTML elements. The text of the title attribute is
combined with a default static message to produce some feedback to the user when the content of
the field is invalid.
Figure 2-10 shows how Internet Explorer 10 deals with patterns when the submitted content is
invalid.