formNoValidate button attribute still triggers :user-invalid css class

Question

formNoValidate button attribute still triggers :user-invalid CSS class

Although it does not require validation it still triggers the class. Is there a non-javascript way of solving this problem?

There is no non-javascript way as the :user-invalid pseudo-class is tied to the browser's validation state, not submission behavior, so even with the formNoValidate attribute, invalid fields will still trigger :user-invalid. What you can do is minimize its impact using CSS to style :user-invalid and make it less noticeable. — Richard
– Richard, Commented Apr 8 at 18:48

ahuemmer · Accepted Answer · 2025-04-12 16:38:31Z

0

No, there is not a CSS only solution. The :user-invalid class is still applied even if the submit button has formNoValidate which is because CSS does not consider button attributes in styling.

The best workaround that still rquires JS is to use JS to add a class to the form when submitting a formNovalidate button and then override the style based on that.

edited Apr 12 at 16:38

ahuemmer

2,11717 gold badges30 silver badges38 bronze badges

answered Apr 12 at 3:44

divine omodunbi

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

formNoValidate button attribute still triggers :user-invalid css class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related