JavaScript & jQuery: The Missing Manual ... - Robert Guajardo

Congratulations—you’ve just added validation to your form using the basic
method discussed on page 281. Next, you’ll add another validation rule for the
“date of birth” field.
Note: If you don’t see an error message and instead get a page with the headline “Form Processed,” the
validation didn’t work and the form was submitted anyway. Go over steps 1–4 again to make sure you
didn’t make any typos.
6. Locate the HTML for the date of birth field——and add class and title attributes so the tag looks like this (changes
are in bold):
Because you didn’t add the required class, filling out this field is optional. However,
if the visitor does type anything into the field, the class=“date” tells the
plug-in that the input must be formatted like a date. You use the title attribute
again to hold the error message if this field isn’t valid. Save the page and try it
out in a web browser—type something like kjsdf in the date of birth field and
try to submit the form.
Note: If you did want to require that the visitor fill out the date of birth field and that enter a valid date,
just add required to the class attribute. Just make sure date and required are separated by a space:
class="date required"
You can use the same technique for validating a menu ( tag).
www.it-ebooks.info
chapter 9: enhancing web forms
Validation Tutorial
Figure 9-8:
Don’t worry about
the appearance of the
error message just
yet. You’ll learn how
to format errors on
page 299.
293