react-hook-form: Errors doesn't clear on change while using `onBlur` mode

I think @Tymek 's right - if you have an error and you correct it (regardless of mode), the error should clear on the change, so you know it happened… I’d like to hear a scenario where that would be unwanted.

Hey @bluebill1049, thanks to you and everyone else for this awesome library.

I mentioned this on #283, but I figured it applied more here.

How can I 1) show an error onBlur, and 2) clear an error onChange?

I tried this:

useForm({ mode: 'onBlur', reValidateMode: 'onChange' })

This is great for showing an error on blur, but it also only clears the error on blur, not on change. Is there something wrong with that implementation?

Code sample here: https://codesandbox.io/s/react-hook-form-get-started-forked-vkk9j?file=/src/index.js:0-748

you want to use mode: onTouched, reVliadateMode is for after submit

Hey @bluebill1049, thanks to you and everyone else for this awesome library.

I mentioned this on #283, but I figured it applied more here.

How can I 1) show an error onBlur, and 2) clear an error onChange?

I tried this:

useForm({ mode: 'onBlur', reValidateMode: 'onChange' })

This is great for showing an error on blur, but it also only clears the error on blur, not on change. Is there something wrong with that implementation?

Code sample here: https://codesandbox.io/s/react-hook-form-get-started-forked-vkk9j?file=/src/index.js:0-748

correct @barrymay, only for reValidate 😃

to be clear that would still avoid validating prior to the first submit if it’s onSubmit?

Yeah I think that would work

@barrymay @Tymek thanks guys, what about we make revalidate to onChange (any mode)? (then it’s not a breaking change and less code)

Adding validation events is OK, but changing/overriding validation event might be a bad pattern. In my work as codebase grow I’d probably end up with many events that are created and cancelled in unpredictable way. Also, modes are not mutually exclusive.

Is something like this use case possible? Validation/revalidation events created in useForm cannot be prevented, but are optional.

const FormComponent = () => {
  const { register, validate, handleSubmit } = useForm({
    validate: ['onSubmit'], // breaking change, refactor of `mode`
    revalidate: ['onSubmit', 'onBlur'], // as in defaults
  })

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" name="name" ref={register} onChange={validate} />
      <input type="text" name="test" ref={register} onBlur={(event) => {
        console.log('blur. cancel maybe? any errors?');
        validate(event);
      }} />
    </form>
  )
}

I need some time to dive into code and make more educated guess.