I use react-hook-form in onChange mode. I enable/disable the submit button depending on the validation state. It works just fine.

Now I have to switch to onBlur mode. And the current solution is not working as expected anymore. When all the field became valid I expect the submit button became enabled immediately. Now it only became enabled when I click out of the last field. What should I change in my code to work as expected?

  const { register, errors, handleSubmit, formState } = useForm({
    mode: "onChange" // I want to change it to onBlur
  });
  const { isValid } = formState;

...

<input disabled={!isValid} type="submit" />

Here is an example: =/src/index.js

UPDATE WITH SOLUTION: NearHuscarl's answer helped to find the solution. I have to stay at the onChange mode and handle the display of the error message myself. I only displaying the error if the field is in the touchedFields object of the formState.

  const form = useForm({
    mode: "onChange" // I want to change it to onBlur
  });
  const { register, handleSubmit, formState } = form;
  const { isValid, touchedFields, errors } = formState;

...

        <div>
          <label htmlFor="firstName">First Name</label>
          <input
            name="firstName"
            placeholder="bill"
            {...register("firstName", { minLength: 3 })}
          />
          {errors.firstName && touchedFields.firstName && (
            <p>"minimum length is 3"</p>
          )}
        </div>

Working example: =/src/index.js

I use react-hook-form in onChange mode. I enable/disable the submit button depending on the validation state. It works just fine.

Now I have to switch to onBlur mode. And the current solution is not working as expected anymore. When all the field became valid I expect the submit button became enabled immediately. Now it only became enabled when I click out of the last field. What should I change in my code to work as expected?

  const { register, errors, handleSubmit, formState } = useForm({
    mode: "onChange" // I want to change it to onBlur
  });
  const { isValid } = formState;

...

<input disabled={!isValid} type="submit" />

Here is an example: https://codesandbox.io/s/react-hook-form-disable-submit-button-onblur-0293x?file=/src/index.js

UPDATE WITH SOLUTION: NearHuscarl's answer helped to find the solution. I have to stay at the onChange mode and handle the display of the error message myself. I only displaying the error if the field is in the touchedFields object of the formState.

  const form = useForm({
    mode: "onChange" // I want to change it to onBlur
  });
  const { register, handleSubmit, formState } = form;
  const { isValid, touchedFields, errors } = formState;

...

        <div>
          <label htmlFor="firstName">First Name</label>
          <input
            name="firstName"
            placeholder="bill"
            {...register("firstName", { minLength: 3 })}
          />
          {errors.firstName && touchedFields.firstName && (
            <p>"minimum length is 3"</p>
          )}
        </div>

Working example: https://codesandbox.io/s/react-hook-form-disable-submit-button-onblur-forked-v8m05?file=/src/index.js

• javascript
• reactjs
• react-hook-form

Share Improve this question Follow edited Apr 8, 2021 at 12:40 Peter Ambruzs asked Apr 7, 2021 at 8:13 Peter AmbruzsPeter Ambruzs 8,22344 gold badges3333 silver badges3838 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

That is exactly how onBlur mode works. From the docs:

Validation will trigger on the blur event.

So when all of your fields bee valid, it does not trigger validation. But once you click outside of the currently focused field, the blur event of that field fires, which runs and passes the validation check, only then the submit button is enabled again.

The solution is to change it back to onChange mode to trigger validation every time the input value changes.