Is it possible to validate fields only on `blur` and `submit` and not `change` events?

Is your feature request related to a problem? Please describe. I need to validate fields only on blur and submit events. Even when I choose mode = onBlur, still it validates the field both on change and blur events. The validation in change event is no needed for me. As far as I understand, mode = onBlur should validate only on blur. Am I right?

Describe the solution you’d like Make validation only on blur and submit possible.

[ilkerkaran]

I have managed to achieve it by setting both mode and reValidateMode to onBlur

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

[acusti]

first of all, congrats on this library. it’s the first react form library i’ve seen that i really like, and i applaud your efforts, design choices, and philosophy.

for this particular issue, i think the default user experience here still leaves something to be desired. in my opinion, in a regular multi-input form, if a user is still focused on an input, it is rarely helpful to interrupt them to tell them that the value of the input is invalid (one exception i can think of is for choosing a password, where it is useful to provide realtime feedback about issues with the password they are creating as they enter it). as a result, i think that once a user returns to an input after submitting that had an error and begins changing the value or entering a new one, the form should not show an error again for that input until it is validated again (onSubmit or onBlur, depending on the mode).

the difference is subtle, but here’s a code sandbox illustrating the distinction: https://codesandbox.io/s/react-hook-form-clearing-input-errors-after-submit-oy2qk

both the first and last name fields are required. if you submit an empty form, both will show the validation error. if you then start entering values for the “first name” field, the error will go away as you type. if you happen to clear the field again as you work on it (like if you make a typo and hit delete, or reconsider what you want to enter), the validation error will once again show, then go away again when you start typing again. to me, that experience is inconsistent from the initial experience and therefore not what i am expecting, as well as being unhelpful and jarring.

for the last name input, i added an onChange prop with a handler that clears the error for that field (if one exists). the handler:

  const clearInputError = useCallback(
    event => {
      if (errors[event.target.name]) {
        clearError(event.target.name);
      }
    },
    [clearError, errors]
  );

the input jsx:

        <input
          name="lastName"
          onChange={clearInputError}
          ref={registerRequiredInput}
          type="text"
        />

as a result, if you happen to clear the input while still focused on it and editing, the error message does not get rendered, consistent with the initial (pre-submit) UX of filling out the form. to me, this latter behavior is preferable.

luckily, it’s not a hard-to-implement workaround, though it took me a while to figure out how to get what i wanted. however, needing to create a custom handler plus onChange to clear the error isn’t ideal, and the rapid double renders of getting the error, then manually clearing the error via the onChange handler would be nice to avoid.