Update: hey, I shipped skillcraft.ai
Learn tech from the best. Ranked by developers. Search courses, tutorials, and books voted on by developers. Skip the guesswork. Try it out, for free!
Up to date
Published
3 min read

Form Validation That Doesn't Annoy Users: CSS :user-valid and :user-invalid

The new pseudo-classes :user-valid and :user-invalid give us a smarter way to style form validation states based on user interaction

Form validation styling has always been tricky to get right. The new :user-valid and :user-invalid pseudo-classes fix a long-standing frustration with CSS form validation - showing error states too early.

Unlike their predecessors :valid and :invalid, these new selectors wait for meaningful user interaction before applying styles. This seemingly small difference leads to a significantly better user experience: no more fields marked as invalid before users even start typing.

With traditional validation, this input would show an error state immediately because it’s empty and required. The new :user-valid and :user-invalid selectors only apply styles after meaningful interaction.

Forms now start neutral and validate naturally as people use them. No more angry red borders on page load - just clean, helpful feedback when it makes sense.

Fallbacks and Browser Support

Browser support for these new selectors is still rolling out, but that’s okay. Modern browsers get the improved behavior while older ones fall back to traditional validation - no JavaScript needed either way.

These pseudo-classes are nice, but what about browsers that don’t support them yet? There’s no built-in fallback - older browsers will simply ignore these selectors. This means users on those browsers won’t see any validation styles at all.

For now, the safest approach is to use @supports to provide a fallback for browsers that don’t support :user-valid and :user-invalid. This way, you can ensure that all users see some form of validation styling.

These small improvements in form validation show how CSS continues to evolve in the right direction.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.


Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
13 min read

10 Essential Terminal Commands Every Developer Should Know

List of useful Unix terminal commands to boost your productivity. Here are some of my favorites.

Aug 21, 2024
Read article
Webdev
4 min read

Understanding Vue's Suspense

How the Suspense component manages async dependencies and improves loading states in Vue apps

Aug 23, 2024
Read article
Webdev
3 min read

CSS :has() - The Parent Selector We've Always Wanted

Transform your CSS with :has(), the game-changing selector that finally lets us style elements based on their children.

Dec 4, 2024
Read article
Webdev
3 min read

The HTML Native Search Element

The search HTML element is a container that represents the parts of the web page with search functionality

Dec 2, 2024
Read article
Webdev
4 min read

Speed Up Your Website With rel='preconnect' and increase PageSpeed Insights Score

Using link rel='preconnect' can improve your website's performance by reducing connection setup times to key external domains.

Sep 13, 2024
Read article
Webdev
3 min read

HTML Details Element: The Native Accordion You're Not Using

Discover how the HTML details element can replace your JavaScript accordions and why it might be better than your current solution

Dec 10, 2024
Read article
Webdev
4 min read

Optimize Your Astro Site's <head> with astro-capo

Automatically improve your Astro site's performance using astro-capo

Oct 19, 2024
Read article
Webdev
4 min read

How To Implement Content Security Policy (CSP) Headers For Astro

Content Security Policy (CSP) acts like a shield against XSS attacks. These attacks are sneaky - they trick your browser into running malicious code by hiding it in content that seems trustworthy. CSP's job is to spot these tricks and shut them down, while also alerting you to any attempts it detects.

Oct 16, 2024
Read article
Webdev
6 min read

Micro Frontends: The LEGO Approach to Web Development

Explore the concept of micro frontends in web development, understand their benefits, and learn when this architectural approach is most effective for building scalable applications.

Oct 2, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/css-user-valid-and-user-invalid-pseudo-classes. It was written by a human and polished using grammar tools for clarity.