:valid, :invalid, and :required CSS Pseudo Classes

By  on  

Let's be honest, form validation with JavaScript can be a real bitch.  On a real basic level, however, it's not that bad.  HTML5 has jumped in to some extent, providing a few attributes to allow us to mark fields as required or only valid if matching a given regular expression.  What some people don't know is that you can style elements base on their required, valid, or invalid values.  Here's how!

The CSS

Each state is colon-separated from the element it's associated with:

/* basics */
input:required {
	border: 1px solid blue;
}
input:valid {
	border: 1px solid green;
}
input:invalid {
	border: 1px solid red;
}

These pseudo classes are straight forward and useful. Here we're changing only borders, but you could use :before and :after to place text or an image next to each field, representing their state.

Being able to style elements based on invalid or valid information is something we've shimmed forever with JavaScript, but now we can do so (to some degree) with pure CSS!

Recent Features

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    Create a Dynamic Table of Contents Using MooTools 1.2

    You've probably noticed that I shy away from writing really long articles. Here are a few reasons why: Most site visitors are coming from Google and just want a straight to the point, bail-me-out ASAP answer to a question. I've noticed that I have a hard time...

  • By
    Create Spinning, Fading Icons with CSS3 and MooTools

    A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I...

Discussion

  1. A small note: :before and :after only works with elements that have content. inputs doesn’t, so these pseudo-elements won’t work.

  2. Amazing post, so in your example you are testing it with input text and email address is that all ?!

  3. “now we can do so (to some degree) with pure CSS!”

    could you please go into more detail about that degree? Browser support? Is this CSS3 only?

  4. @Sumit – I can’t find any references on caniuse.com or anything similar. From my testing it works on: latest Chrome, latest Firefox, lateset Safari and IE10+. It doesn’t work on IE9 or below.

  5. The :before and :after pseudo-elements elements interact with other boxes… as if they were real elements inserted just inside their associated element. More… http://www.corelangs.com/css/basics/pseudo.html CSS pseudo-elements

    Eric

  6. Diego Leme

    Bug in IE usign pseudo-elements
    http://codepen.io/diegoleme/pen/cJyjF

  7. A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic — they’re applied as a result of user interaction with the document.
    for full implementation of pseudo class to refer here:
    http://www.mindstick.com/blog/711/CSS%20Pseudo%20Class

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!