setError doesn't prevent form submission if set outside of onChange handler

When I try to set an error via setError API outside of onChange handler (in onBlur for example) it sets the error and the formState.isValid equals to false. However, it doesn’t prevent form submission.

Is that by design?

Here is a codesandbox

Expected behavior: When submit button is clicked handleSubmit isn’t called and the problematic input gets focused.

P.S. Thank you for your great work on this library! 👏

[bluebill1049]

looks like this is the correct behavior. here is the reason:

you have set an error during useEffect

useEffect(() => {
    setError("username", "notMatch", "please choose a different username");
  }, []);

however, your input validation rule is saying a different story:

         <input
            name="username"
            placeholder="username"
            defaultValue="lalala"
            ref={register({ required: true })}
          />

which is only required.

During submission, react hook form will validate your validation rule in register/schema, and then validation rule meet and pass.

which you should have done is put the validation inside of the register or during submit for server side validation:

         <input
            name="username"
            placeholder="username"
            defaultValue="lalala"
            ref={register({ required: true, validate: () => { // compare password using watch or other methods } })}
          />

server-side

const onSubmit = aysnc () => {
  if (await validateServer) {
    setError('username', 'servererror', 'messsage')
  }
}

hope this makes sense.

[GProst]

@bluebill1049 this does make sense to me indeed. However, I faced with one inconvenience… I want to achieve the following UX:

1. The input doesn’t show an error until blur event (mode: 'onBlur' solves it)
2. After an error is shown input gets validated on change event so that it hides an error as soon as the validation passes (similarly to what happens with mode: 'onSubmit')

But looks like I can’t currently achieve that (not easily at least).