How to use :user-valid and :user-invalid pseudo-classes for validation

Written by

Walter G.

Published on

November 27 2023

Modified on

January 07 2024

Filed under

css

User input validation on websites, for the most part, has usually come down to the specific design that a developer or a designer have come up with. The CSS specification though does have rules available for built-in validation styles. But, they have been somewhat limited for the most part.

Take the following input:invalid CSS rule for example. The HTML markup is the following:

<input type="text" id="input1" required />

And the CSS looks like this:

#input:invalid{
   border:solid 2px red;
}

The result looks something like the following.

Because the field is marked as required, the browser will immediately render it as invalid and add the red border specified in the CSS rule.

Not the end of the world, but most designers would agree that initializing a signup form with error messages and red borders isn't the way to go.

And so what's a developer to do? Well, most developers would probably either remove the required flag altogether, and handle validation in JavaScript directly, or they would avoid any :invalid style rules and use JavaScript code to style the element, perhaps by adding a class name if indeed the text is invalid.

:user-invalid and :user-valid

:user-invalid and :user-valid are similar in nature to :invalid and :valid, with one key exception.

The :user- prefixed pseudo-classes only take affect once a user has engaged with a form control. Meaning by default, these controls are not loaded in an invalid state.

Here is the same example as above, but using the new pseudo classes.

<input type="text" id="input2" required />
<input type="text" id="input3" required />

And the CSS looks like the following:

#input2:user-invalid{
   border:solid 2px red;
}

And that results in the following:

In this particular case, the invalid style rules will only be applied once you have interacted with the first input control. So if you type something into Input 2, and then leave it empty, once you switch the focus to input 3, you will see the invalid styling take affect.

Does this mean that in the future you will no longer need to code out any custom validation style logic? Well, probably not. While it's definitely a step in the right direction and this can definitely help to reduce a few lines of code, most validation on the internet today is still very much custom in nature.

Aside from the control style rules, you might also need to provide users with further information as to what exactly went wrong and how to fix it through summary sections.

Other times you will see custom animations designed for validation, matching the overall theme and design of a particular website.

In the future though, perhaps we'll start to see more and more of this getting taken care of through standardized CSS style rules.

Comments

No messages posted yet

Add comment