Using Level 4 CSS validity pseudo-classes to improve UX

Michael Weaver
Jun 25, 2015 · 2 min read

This week there has been numerous articles flying around regarding selectors that may be included within CSS4.

One such article was Louis Lazaris’ which really nicely explained some of the new selectors which may be available and how we can use them.

The selectors that really stood out to me were the validity pseudo-classes. These selectors will allow us to change the display of elements depending on whether they are valid or invalid.

Why is this so exciting you ask?

It should be mentioned that this isn’t a solution for validating submitted values for form elements ( you will still need some server side code to do that ).

But this is perfect for helping visitors see that they are not forgetting to add values to inputs, or to even check that the type of value they are adding is right before they hit that submit button.

For instance check out the example below.

The element will be invalid until there is a value, and that value appears to be an email address.

How to use

<input type="text" placeholder="name" required>

The required attribute on the above element help the user to see this cannot be empty, but using these new pseudo-selectors we can improve the UX even more.

/* this will display until the input value is valid */
input[ type=text ]:invalid {
border-color: red;
}
/* once a value is found, show the user */
input[ type=text ]:valid {
border-color: green;
}

Once the input has a value, the border colour will change to green.

When using an email input field, the user will need to add a value and for that value to appear to be an email address before it becomes valid.

<input type="email" placeholder="email address" required>

How widely is this supported?

This is supported in the latest versions of IE, Firefox and Chrome, but Safari provides only partial support. Check out CanIUse.com for more information.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store