issue: isValid reports incorrect value

[quicksnap]

Version Number

7.32.1

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-isvalid-falg-issue-forked-s24jmj?file=/src/App.tsx

Steps to reproduce

1. Open sandbox. Select first name and clear it
2. Submit form
3. View form state

Demo:

Expected behaviour

isValid: false

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[quicksnap]

Continuation of #8497

[bluebill1049]

Thanks for the detailed issue report.

[quicksnap]

Thanks for being so responsive and maintaining this library! <3

[bluebill1049]

you are missing the mode attribute :)

https://react-hook-form.com/api/useform/formstate

Note: isValid is affected by mode at useForm. This state is only applicable with onChange, onTouched, and onBlur mode.

[quicksnap]

That behavior is surprising to me. Has the potential to confuse developers (like me!) who miss the fine print. Erroneously being isValid: true is misleading.

If this is intended, we can close the issue. Is there any way to have isValid work with the onSubmit mode?

[bluebill1049]

If you subscribe to isValid this means each keystroke formState isValid will need to update, so in your use test case above, the isValid should reflect false the moment you clear the input not after you submit, hence onChange mode is required because you are telling hook form to subscribe to each onChange to update formState. if you only care about errors being empty or not probably just check Object.keys(errors).length will do.

Hope the above makes a bit more sense.

[quicksnap]

My reasoning for expecting isVaid to change was due to how onSubmit mode was documented:

Validation will trigger on the submit event and invalid inputs will attach onChange event listeners to re-validate them.

I figured after submit, isValid would track with the submit mode, and then subsequent onChange for the affected fields.

My use case is that I do not want to show any errors until submit is clicked. If the form is invalid, I then want to disable submit button until all fields are valid.

It's additionally inconsistent behavior with onSubmit mode since, after submitting and modifying another field, the isValid state updates, even though that field was valid. If this is the case, can we not trigger isValid recalculation upon submit for onSubmit mode?

[bluebill1049]

isValid should always represent the entire form validity, like what I suggested above, you can check Object.keys(errors).length to suit your use case.

const hasNoErrors = !Object.keys(errors).length

[quicksnap]

isValid should always represent the entire form validity

If it should always represent entire-form validity, then it is not correct after the submit button is clicked, even though mode: 'onSubmit'

Hopefully my tone doesn't sound argumentative. Just trying to share my viewpoint! Thanks again for discussing.

[bluebill1049]

No, you are not. :) Yes, but if you are not subscribed to onChange mode then the hook form simply can't guarantee that value to be updated and all the computation for such formState is omitted. Each formState has its own computation to generate its result, we are doing that optimization within the library to boost your form's performance.

[zachfedor]

@bluebill1049 I totally understand the purpose of of isValid requiring a mode for performance reasons, there's no sense causing re-renders after every change event on the typical form with uncontrolled inputs. But I'm in a similar position to @quicksnap and your suggested fix isn't a complete solution.

Take the example of a form using the onSubmit mode, isValid is initially false. After the user clicks submit, the fields are validated and there are errors, so Object.keys(errors).length > 0 and isValid continues to be false. Now the user is given error messages and goes to fix them. Once they do, Object.keys(errors).length doesn't change but isValid does.

There is no way for us to let a user know that they have fixed all validation errors simply using Object.keys(errors).length.

[quicksnap]

It is still my opinion that this is an area that could use improvement. There are workarounds, but it is not intuitive, and leads to a "pit of failure" for naïve developers.

[lukasgebhard]

I also fell into this pitfall. My form uses mode: 'onBlur', and additionally the form submit button - on mouse over - calls trigger(). I expected trigger() to update isValid, but it does not.
I use react-hook-form v7.33.1.

[chilidoggca]

I just spent 4 hours debugging why isValid kept returning false until I found this discussion. If mode is required for validation to work, shouldn't mode default to 'onSubmit'? Also, none of the basic usage examples in the docs actually passed 'mode'.

My form uses third party UI components and I wrap those in higher order components, so I spent a lot of time trying to figure out if my props and refs were not being passed correctly. Setting mode in useForm fixed the issue.