react-hook-form: Handlesubmit doesn't respect error set with setError

Describe the bug I have a register form where I do async requests to server to validate username and email. I do this onChange and set or clear error when needed.

My problem is, when handleSubmit is triggered via onClick handler of the form’s submit button, it clears error on username, email. Even though these username and email aren’t valid and unique, my error ge

To Reproduce Steps to reproduce the behavior:

Have a form where you do setError from onChange.
Submit form

Expected behavior It shouldn’t submit the form and show the error on the field.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 15 (9 by maintainers)

Most upvoted comments

@BatuhanW thanks, it’s not been reset, because your input is not returned any error during submit.

each input will go through valuation during submit, and your input doesn’t have any error return by the input. that’s why I suggested using validate.

why not set the mode to onSubmit? so validation is not triggered during input change?

bluebill1049 on Oct 17, 2019

throttle/debounce doesn’t fix my issue, because they make requests eventually. @bluebill1049 My quick solution is to prevent submitting form;

 onClick={e => {
                                        if (formState.isValid) {
                                            handleSubmit(onSubmit)(e);
                                        }
                                    }}

But I will give a shot to useRef or hoisting variable.

But still can’t understand tho, why do the errors being reset onSubmit, isn’t it something bad?

BatuhanW on Oct 17, 2019

@bluebill1049 The docs only mention async validation by passing an async function to the handleSubmit function. Nowhere else is async validation mentioned.

However, I think that you just recommended the validate function, I’m assuming as part of the call to register, e.g. register({ name: "hello" }, { validate: async () => await xxx() }).

~~Is that correct? Can you pass an async call like that, to the validate option of register?~~

OK, I looked in the code and I see the call to await validate here in validateField.ts.

Your documentation is so good looking, that I bet people are thinking that it’s up to date as well.

waynebloss on Oct 15, 2019