Despite setting to 'onSubmit', Input validation occurs on blur about react-hook-form

[bluebill1049]

any chance you can give me the entire code?

the following example seems to be ok.

https://codesandbox.io/s/priceless-williams-7btcl

[bluebill1049]

do you mean after submit was clicked and the revalidation behavior? at the moment, revalidation is based on input change, but I am planning to introduce another prop to force revalidation to be a specific type.

No, the form is pristine. I click on an input and then I click on the page. Consequently, validation fires and adds a required type validation to errors.

[bluebill1049]

hmmm its really weird, did you look the example link I shared? it worked there, can you share your code tho?

Unfortunately I cannot share whole code. You right it works in your shared example. it's wired!

I think I got the problem. I try to use it in a multi-step way. In every step I have a submit validation, when it validates on time, in next steps it fires validations onChange!

[bluebill1049]

Shouldn’t u break it into mutiple forms?

Technically it's one form that every field of it is in one step.

[bluebill1049]

Then you probably shouldn’t submit the form when it’s not fully fulfilled, maybe have a button which take to the next step. And validate at the end.

How can I call just validation and not submit?

Then you probably shouldn’t submit the form when it’s not fully fulfilled, maybe have a button which take to the next step. And validate at the end.

No I can't. In every step, user should provide valid information!

[bluebill1049]

I don't think your approach is going to work with how react-hook-form works, because validation will trigger perform via submit button which is an HTML standard.

I suggested if the from is big, you should break them into individual forms and collect them individually. I am working on a funnel which contains 40 plus steps (forms) and that's how we work.

feel free to provide your suggestion tho

Great! I think there should be a validate function like what exist in 'rc-form'. It just validates current fields or the fields name that we provide as parameters.

[bluebill1049]

thanks for the sharing rc-form :)

After reviewing, I don't think that the direction react-hook-form should be heading, the whole point of making this custom hook is to make things simple by introducing less API if possible.

The last option on top of my head is only register input after previous steps pass.

step A: <input ref={regster} />
step B: <input /> unitl step A pass then <input ref={register} />

I think I have provided my suggestion to make it works, break it into multiple forms or register only when required. hope either one of the methods will work for you.

[bluebill1049]

ok, I have a better solution may be is good for you.

<form>
  <input /> // step1

  {step2Valid && <><input /><input /></>} // step 2
  {step3Valid && <><input /><input /></>} // step 3
</form>

if you don't render step2 and step3 inputs, then validation won't kick in, start to render rest of steps by validating previous steps.

[bluebill1049]

https://codesandbox.io/s/react-hook-form-validationfields-1xb91