onSubmit, onChange, and useFieldArray validation

[dhess]

Hi, thanks for this great library!

We're using the Zod resolver for validation. When we use it with a simple static form, the default validation behavior works as documented in react-hook-form: no validation occurs until the user submits ("onSubmit"), then re-validation kicks in with "onChange" if the initial validation fails.

However, when we use the Zod resolver with useFieldArray, it appears that "onChange" validation begins as soon as the user invokes a control that calls useFieldArray's append method, before they submit.

Is this expected? If so, how can we effectively achieve the same behavior as the default behavior for static forms; that is, start with "onSubmit" and only switch to "onChange" after the first submit?

[bluebill1049]

However, when we use the Zod resolver with useFieldArray, it appears that "onChange" validation begins as soon as the user invokes a control that calls useFieldArray's append method, before they submit.

can you share a codesandbox on this?

[dhess]

I'll try to make a reproducer. I've never used codesandbox before. Is there a sort of push-button way to create a template that uses the latest react-hook-form? never mind, I see how it works now.

[dhess]

My apologies: as I mentioned, I'm inexperienced with codesandbox, but I can't figure out how to import a public GitHub repo into a sandbox without giving codesandbox permissions to read and write private repos, which I'm unwilling to do. I have, however, created a simple project that reproduces the issue:

https://github.com/hackworthltd/rhf-reproducer

The simple static form there does what I want: it does not validate until submit, then sets onChange for re-validation.

The dynamic form using useFieldIndex demonstrates the problem: as soon as you press the "Add" button, it immediately validates the required firstName field. I want it to ignore that field (and any fields that are added via "Add") until the first submit, then switch to onChange.

Note that I was able to reproduce this without even using Zod validation, just the built-in validation, so this does not appear to be related to Zod. I've changed the title of the discussion to reflect that.

I'm probably doing something dumb, but any help here pointing out my mistake would be welcome. Thanks!

[leapful]

@dhess

Your "Add" button does not set attribute type, therefore, type="submit" will be the default attribute of HTML Button element and causes onSubmit event handler to be triggered because "Add" is now a submit button.

Just add attribute type="button" to solve this problem.

[dhess]

Hi @leapful, thank you! That change has indeed made the behavior of useFieldArray and onSubmit identical to useForm.

[prphawk]

thanks!! I had the same problem

[slinden2]

Thanks! This thing was driving me crazy.