HTML5 and CSS3, Second Edition

(singke) #1
<inputid="last_name"type="text"
required
name="last_name"placeholder="'Smith'">
</li>
<li>
<labelfor="email">Email</label>

<inputid="email"type="email"
required
name="email"placeholder="[email protected]">
</li>

Browsers that support this attribute then prevent the form from submitting
if the fields are not filled in. We get a nice error message, and we don’t have
to write a single line of JavaScript validation. Here’s how Chrome handles
this:

We’ve also designated the Email field as a required field, and by doing that
we get an additional benefit; users need to enter something that looks like
an email address.

This is another great reason to use form fields that describe our data.


That takes care of the first three required fields, but we want to ensure the
Password field meets the eight-character-minimum requirement.

Validation with Regular Expressions


The pattern attribute lets us specify a regular expression against which we can
validate the user data. The browser already knows how to validate email
addresses and URLs, but we have specific rules for the Password field So, we
add the pattern attribute to the Password field, using a regular-expression rule
that enforces our password requirements of eight or more characters with at
least one number, an uppercase letter, and one special character.

report erratum • discuss

Validating User Input without JavaScript • 55


Download from Wow! eBook <www.wowebook.com>

Free download pdf