HTML5 and CSS3, Second Edition

html5_validation/index.html

<li>

<labelfor="password">Password</label>

<inputid="password"type="password"name="password"value=""

autocomplete="off"placeholder="8-10characters"

pattern="^(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*[\d])(?=.*[\W]).*$"

title="Passwordmustbe 8 or morecharacterswithat

leastone number,an uppercaseletter,and one specialcharacter"

/>

</li>

Notice that we use the title attribute here to give a descriptive message as to

what the user should enter.

And now when we try to enter something that doesn’t match we get an error

message. The title attribute’s contents get added to the error message.

We’ll want to make the Password Confirmation field use the same pattern.

html5_validation/index.html

<li>

<labelfor="password_confirmation">PasswordConfirmation</label>

<inputid="password_confirmation"type="password"

name="password_confirmation"value=""

autocomplete="off"placeholder="Typeyourpasswordagain"

pattern="^(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*[\d])(?=.*[\W]).*$"

title="Passwordconfirmationmustbe 8 or morecharacterswithat

leastone number,an uppercaseletter,and one specialcharacter"

/>

</li>

One thing we can’t do with these validation attributes is ensure that the

password and its confirmation are the same. That’s something we would need

to handle with JavaScript.

Styling the Fields

Our form already has basic styles, but we now have some additional informa-

tion on the fields that we can use to make it more apparent when the user

has encountered errors. Some browsers, like Firefox, highlight the invalid

fields when they lose focus. Other browsers don’t provide any feedback until

Chapter 3. Creating User-Friendly Web Forms • 56

Download from Wow! eBook <www.wowebook.com> report erratum • discuss