Form creation: input widgets, data binding, and data validation - HTML5 in Action - page 66

When using the pattern attribute, you can give a hint to your users about what format
your data field requires by using the title attribute. This hint will be shown to users in a
tooltip when they move their mouse over the field, but it will also be appended to the error
message if users enter an invalid value in the field, as shown in figure 2.8 .
Figure 2.8. When the pattern matching fails, the browser will pick up extra information about the format required
from the title attribute. If it's provided, tag it onto the end of the error message displayed to the user.
Step 5: Build the Payment Details form section
Let's add those two new features: the month-picker to give the user a quick and easy way
to enter dates and the pattern attribute to define valid data patterns. Add the code from
the following listing to index.html, directly after the code from the previous listing.
Listing 2.5. index.html—The Payment Details form section