Lacking CSS Support for Client-side Form Validation

There is some support for client-side form validation already available in today's browsers.

• [MDN] Client-side form validation
• [MDN] Constraint validation

CSS support for them is lacking in one aspect, though. You cannot check whether a form has already been submitted, or whether a form element has already been changed or not. That means that all styling using the :invalid pseudo-class will apply on page load already. The user did not even have a chance to fill out the form and is already presented with an invalid state styling and—possibly—error messages.

Mozilla has known about this problem for years. Hence, they added their own, non-standard pseudo-class :-moz-ui-invalid. It matches form elements, that are invalid and have been interacted with. And the CSSWG is working on a pseudo-class called :user-invalid which matches the same elements.

• [MDN] :user-invalid (:-moz-ui-invalid)
• [MDN] :user-valid (:-moz-ui-valid)
• [CSSWG] :user-invalid draft

Additionally, there is a suggestion from 2014 (!) to introduce a :changed (or perhaps :edited or :altered or :dirty) pseudo-class which would match any form fields that have been changed by the user.

If you need proper, user-friendly validation styling today, you probably have to use JavaScript. People on Stack Overflow have some ideas.

• Delay HTML5 :invalid pseudo-class until the first event
• How to make pseudo class :invalid apply to an input AFTER submitting a form
• Validation in HTML5. :invalid classe after submit

Update April 19, 2021: Firefox 88 added support for both :user-valid and :user-invalid. It is currently the only browser that supports these pseudo-classes.