Using Level 4 CSS validity pseudo-classes to improve UX

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.