:valid and :invalid CSS selectors

[andrew-shakurov]

The react-hook-form library claims to embrace native browser validation rules. However, an input that has failed validation has native validity attribute set to "true" (https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) . Therefore CSS selectors :valid and :invalid does not apply properly preventing their usage for styling input elements.

How to reproduce

1. Open original example on codesandbox https://codesandbox.io/s/o766kp4z05?file=/src/index.js
2. Leave fields empty and submit the form
3. First Name becomes marked as required and an error message is displayed next to it
4. Select the input node corresponding to the First Name in code console of your browser
5. The validity.valid property of that element contains "true"

Expectations

• The input build in validity.valid must contain "false" when the validation is failed.
• The :invalid CSS selector correctly applies to that input allowing me to style it properly

I am aware that I can set my custom styles based on the errors passed by react-form-hook. But it would be really great having those native :invalid :valid selectors working out of the box.

[bluebill1049]

now we still embrace HTML native validation rules, we used to have this feature at v3, but the usage is very low... consider all those external controlled component doesn't even forward the ref, it's a challenge to make it work to cross the board and also react native.

you can vote on this: we will consider to bring it back:

#2659

[andrew-shakurov]

Thank you for your response @bluebill1049 . Many of us use bootstrap for styling, that utilizes :valid :invalid selectors for styling form feedback. I am surprised to hear, that the usage of those selectors is low.

I understand, that implementation and maintenance come at price. I appreciate the efforts your team are investing in the library. I will vote for that feature. I hope that you will get a chance to implement that functionality as well. Thank you!

[franciscocobas]

I vote for adding this option too.

[ShahriarKh]

same here +1

[bluebill1049]

please update this feature request: #2659

[ShahriarKh]

Done.

[bluebill1049]

cast your vote here: https://twitter.com/HookForm/status/1402189525057638413