---
title: "Discussion on \"How to Fix Form Validation UX: Switching from :invalid to :user-invalid\" | Hashnode"
description: "Discussion on \"How to Fix Form Validation UX: Switching from :invalid to :user-invalid\". Tired of red error borders appearing too early? Learn how to fix form UX by switching from :invalid to the modern CSS :user-invalid pseudo-class."
url: "https://hashnode.com/posts/how-to-fix-form-validation-ux-switching-from-invalid-to-user-invalid/699376d10c6be409a83e961f"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [How to Fix Form Validation UX: Switching from :invalid to :user-invalid](https://0xdezman.hashnode.dev/how-to-fix-form-validation-ux-switching-from-invalid-to-user-invalid?utm_source=hashnode&utm_medium=feed)

Tired of red error borders appearing too early? Learn how to fix form UX by switching from :invalid to the modern CSS :user-invalid pseudo-class.

Feb 16 · 6 min read · 0xdezman.hashnode.dev  
Read the article

-   [#css](https://hashnode.com/tag/css)
-   [#css3](https://hashnode.com/tag/css3)
-   [#form-validation](https://hashnode.com/tag/form-validation)
-   [#html5](https://hashnode.com/tag/html5)
-   [#forms](https://hashnode.com/tag/forms)
-   [#frontend-development](https://hashnode.com/tag/frontend-development)

## Written by

[Abdulganiy Adeleke](https://hashnode.com/@0xDezman)

@0xDezman · Lagos, Nigeria

  
[View profile](https://hashnode.com/@0xDezman)

swe & technical writer

## Responses 2

Markdown supported · ⌘↵ to post

[Tiffany Spark](https://hashnode.com/@markupandmatcha)

[Feb 17](https://hashnode.com/posts/how-to-fix-form-validation-ux-switching-from-invalid-to-user-invalid/699376d10c6be409a83e961f/comment/6994e4846249b2acc7d509f0)

been doing exactly this on client sites lately, the difference in how forms feel to users is massive. the :user-invalid approach is so much kinder than screaming red borders the moment someone clicks into a field.

[Tiffany Spark](https://hashnode.com/@markupandmatcha)

[Feb 17](https://hashnode.com/posts/how-to-fix-form-validation-ux-switching-from-invalid-to-user-invalid/699376d10c6be409a83e961f/comment/699499aeae5d02f7ab121d13)

this is such a small change but it makes such a difference to how a form feels — i honestly used to just live with the premature red borders and assume clients would ignore it. bookmarking this to actually fix it properly on my next build. the browser support table is super helpful too, good to know it is basically safe to use now