POSTED IN

Using CSS4’s validity pseudo-classes to make forms epic

by: isev

on: 25th June, 2015

CALL US

01952 897 444

css4-classes

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 JavaScript or your 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.

Industry news, tips and general updates.

Sign up to our newsletter, and get our content first.

We will never spam you. You can unsubscribe with one click.

READ MORE

You might also like…

LATEST ADVICE & GUIDES  VIEW ALL

OUR DAILY ACTIVITY   FOLLOW