HTML5 Zone is brought to you in partnership with:

Raymond Camden is a developer evangelist for Adobe. His work focuses on web standards, mobile development and Cold Fusion. He's a published author and presents at conferences and user groups on a variety of topics. He is the happily married proud father of three kids and is somewhat of a Star Wars nut. Raymond can be reached via his blog at www.raymondcamden.com or via email at raymondcamden@gmail.com Raymond is a DZone MVB and is not an employee of DZone and has posted 243 posts at DZone. You can read more from them at their website. View Full User Profile

HTML5 Form Validation with Style

03.24.2012
| 25334 views |
  • submit to reddit

Welcome to my third and final (although whenever I say that it typically leads to more posts, diversions, and expirements) on HTML5-based form validation. In the first entry I discussed how you could add simple server-side validation to your forms by just using HTML. In my second entry, I demonstrated how to add JavaScript for deeper, and customized validation. In this final entry, I'll discuss how to employ CSS to visually enhance your forms.

While doing research into this topic, I had a vague idea of the CSS styles that could be used. But I had a difficult time finding an exact specification for the feature itself. Called "CSS Pseudo-Classes", these are styles that reflect a state of a DOM item instead of simple a tag or class. I came across an excellent article by Ryan Seddon on form validation where he lists the following pseudo-classes:

  • valid
  • invalid
  • required
  • optional
  • in-range
  • out-of-range
  • read-only
  • read-write

Right away, we can see that there are some interesting options here. I went into this research expecting support for invalid and valid, but the other options surprised me. Using in-range and out-of-range, you can actually apply slides to number text fields that are not within a particular range. I also think it is cool that you can combine required, invalid, and valid, to visually represent three separate states for a form field. Let's look at an example.

Here is one of the forms I used in my first example. It contains both a login and registration section.

<h2>Login</h2>
<form action="" autocomplete="off">
<label for="username">Username</label>
<input id="username" name="username" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 letters or numbers." required>
<!-- Credit: http://stackoverflow.com/questions/5458076/regex-in-new-pattern-attr-for-html5-forms -->
<label for="password">Password</label>
<input id="password" name="password" type="password" pattern=".{5,}" title="Minmimum 5 letters or numbers." required>
<p/>
<input type="submit" class="btn" value="Login">
</form>

<h2>Register</h2>
<form action="" autocomplete="off">
<label for="username2">Username</label>
<input id="username2" name="username" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 letters or numbers." required>

<label for="password2">Password</label>
<input id="password2" name="password" type="password" pattern=".{5,}" title="Minmimum 5 letters or numbers." required>

<label for="email">Email</label>
<input id="email" name="email" type="email" required>

<label for="url">Homepage</label>
<input id="url" name="url" type="url">

<p/>
<input type="submit" class="btn" value="Register">

</form>

And here's how it renders normally.

Now let's add a bit of CSS:

<style>
input:required {
border-style:solid;
border-width:thick;
}
input:valid {
background-color: #adff2f;
}
input:invalid {
background-color: #f08080;
}
</style> 

I've defined 3 different things here - all using pseudo-classes. The first defines a thick border for required items. The second defines a greenish (it's a color - honest) color for valid items and a reddish color for invalid items. Now look at the same form:

Big difference, right? Now look at it after I've done a bit of editing.

What isn't evident in these screenshots is that Chrome and Firefox both animate these styles. It's a minor animation, pretty subtle, but it works rather well. You can demo this form here:

Just imagine if someone with - you know - actual design sense were to work with this? Now let's look at another example. In the form below, I've got a few simple text fields but also some numeric ones:

<form id="mainForm">

<p>
Not required, nothing special:
<input type="text" id="field0">
</p>

<p>
Just required:
<input type="text" id="field1" required>
</p>

<p>
Email:
<input type="email" id="field2" required>
</p>

<p>
URL:
<input type="url" id="field3" required>
</p>

<p>
Number:
<input type="number" id="field4" required>
</p>

<p>
Number (Min 0):
<input type="number" id="field5" required min="0">
</p>

<p>
Number (Max 10):
<input type="number" id="field6" required max="10">
</p>

<p>
Number (Min 1, Max 10):
<input type="number" id="field7" required min="1" max="10">
</p>

<p>
Number (Min 1, Max 10, Step 2):
<input type="number" id="field8" required min="1" max="10" step="2">
</p>

</form>

I used the following CSS. Note specifically the in-range and out-of-range pseudo-classes:

<style>
input:required {
border-style:solid;
border-width:thick;
}
input:valid {
background-color: #adff2f;
}
input:invalid {
background-color: #f08080;
}
input:out-of-range {
background-color: #808080;
}
input:in-range {
background-color: #8a2be2;
}
</style>

In Chrome, this is what you get:

My numeric fields are empty, but marked in-range, which is a bit weird. But look what happens when I intentionally enter a bad value for one of them:

As you can see, it did recognize my number was too low and colored it wrong. All very interesting, but it looks like Firefox doesn't support these two at all:

It looks like Firefox isn't supporting the number type at all so it makes sense for the pseudo-class not to be supported either. Thankfully Firefox supports mission critical features like Canvas, which is obviously more much more important than form fields. (Oops, sorry, I started my old rant again. I'll stop.) It does fall back nicely though so it's certainly not a total loss.

You can demo this version below.

Published at DZone with permission of Raymond Camden, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Palukuru Vij replied on Sun, 2013/11/17 - 8:33am

I really like this article. I will format the text box in my railway pnr status website: pnr status

Lisa Coffey replied on Fri, 2014/07/11 - 5:41am

Right away, we can see that there are some interesting options here . I went into this research expecting support for invalid and valid, but the other options surprised me. Using in-range and out-of-range, you can actually apply styles to number text fields that are not within a particular range. I also think it is cool that you can combine required, invalid, and valid to visually represent three separate states for a form field.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.