the clearErrors function sets the isValid attribute to true when the form is invalid

[matilameiro]

First of all, I apologize for the English, I am using google translate.

I have a field using the controller component that has a component inside
from the react-formated-number library. In the onChange the credit card number is valid against the api. If it is not correct I use setError and if it is correct and in case I previously had an error set, I use the clearErrors function which sets the isValid attribute to true for the entire form and this is not correct.

[bluebill1049]

I believe this is fixed in the latest version

[Moshyfawn]

What's your react-hook-form package version? Works fine with the latest 7.23.0 version.
Check out this codesandbox to see if you do anything different. Try your version of the react-hook-form package with the codesandbox.

1. Submit the form once for the first field validation error to kick in
2. Enter the full credit card number. The card validation will fail
3. Change any credit card string number. The validation will be successful and only credit card field error will be cleared

[bluebill1049]

thank you @Moshyfawn again for your help

c1d7731

[Moshyfawn]

Aw, thx :P Luv the lib! Hoping to get some time to look into the RHF codebase to maybe do PRs in the future. Have time for discussions only at this time :(

[matilameiro]

Many thanks to both of you for the quick response. With the version change it was solved and thank you very much for the example.

Now the problem that is happening to me is that the error is eliminated but the isValid attribute remains false even if there is no error and it is the attribute that I use to see if it can advance in the stepper or not. I hope you can help me.

Thank you very much. Again I apologize for the english.

[Moshyfawn]

See #7524

[matilameiro]

The mode of the form is 'onBlur'.

Another problem I am having is that when I do onBlur of the second field (expiration, in the picture) it changes the isValid atributte to true when the credit card field has an error.

[bluebill1049]

thanks @Moshyfawn I have replied to the issue.

clearErrors should not affect isValid formState, because it doesn't change any validation rules, it only wipes errors, isValid should only reflect your form is valid or not.

setting a custom error that doesn't associate with input will require a manual clearError because it doesn't associate with any input.

[Moshyfawn]

Got it, @bluebill1049!
So, @matilameiro, you can potentially move your validation logic into the validate callback in rules. This will associate the potential card number error with the card number field. Since the form validation mode is 'onBlur', the credit card field is going to be validated on it's blur event. See this codesandbox.
I'm not sure if you can achieve the onChange validation for the credit card field without switching the form mode to "onChange".

Screen.Recording.2022-01-14.at.1.21.52.AM.mp4

[matilameiro]

I tried to pass the validation to the validate but it happened more times than only in the onblur and it makes a lot of calls to the backend. In the onblur of the rest of the changes it also passes through the validate. I suspect that the combination with the react-format-number library is the big problem.

The other big problem is that the onBlur of the expiration field (which also has the react-format-number component) changes the isValid attribute. In my case it leaves it true.

I am thinking of changing one of the 2 libraries, no matter how long it takes me.

I am grateful for the responses. I thought I was not going to have such quick answers.