Goodbye, JQuery Validation: HTML5 Form Errors With CSS3

Working on the remake of this site’s user signup form, I very much wanted to keep to the design goals of simplicity, clarity, and ease of use I discussed in the previous article. Simultaneously, I wished to apply the same principles to my code. To me, this meant eliminating as much PHP and JavaScript as possible, and using CSS3 for most error messages and the appearance of invalid entry fields.

CSS3 allows for the detection of the status of HTML5 form elements through the use of the pseudo-class selectors :valid and :invalid. For the purposes of demonstration I’ll use the email input to start, as it has built-in validation:

Detecting whether the user has entered information correctly in the field is simple, using an attribute selector combined with the :valid pseudo-class:

Changing the appearance of the input is good and fine, but I wanted to take the effect further, and add an error message if the information entered by the user was incorrect. One would think we could chain pseudo-class selectors together:

Sadly, we cannot use :after or :before directly on a form input. Like the <img> tag it is a replaced element: essentially, anything that would be closed inside of itself under XHTML, such as <img> or <hr>, cannot have generated content applied to it.

All is not yet lost: there is another way.

The technique that follows can be used on any input, including email, let’s change the input type attribute to text to keep things interesting. For this example, let’s say we are looking for a user’s first name. In that case, the regular expression we’ll use for pattern will be very simple: we won’t accept numerals, but anything else comprised of at least two upper or lowercase letters will be fine:

Let’s also add a span immediately after the input, with a title attribute that contains an error message associated with invalid content:

We want to complete the span with the text of the title attribute. This will also mean that browsers that don’t support CSS3 won’t see the text, creating a state of graceful degradation.  We’ll make sure it’s the span after the input by using a sibling selector:

The default appearance of any generated content in the span will be invisible, via use of opacity:

… but we’ll change that based on the invalidity of the information entered into the field immediately before it:

Done! But the appearance of the error message is a little sudden and clunky: it shows up just as soon as we type the first letter in the field, potentially distracting and confusing users. We’ll delay and fade in the message by using transition-property, duration and delay:

While you should add vendor prefixes to cover the other browsers, you will find that Webkit does not yet support transitions on :after or :before, so in Chrome and Safari the error messages will come up instantly. You can see the completed effect in the small form at the top of this article.

These techniques do not completely eliminate JQuery from forms: you’ll still need the scripting technology for features like AJAX validation (checking if a username is already registered in a database, for example), or to recreate the same effect in older browsers. You’ll also need PHP or some other server-side technology to act as a secure inpassable fallback for ultimate validation of user-submitted data. But the techniques demonstated here continue to do what CSS3 should: push JavaScript into more advanced and useful areas, rather than being used for simple actions on a page.