react-hook-form only validate on submit

Question

How can I prevent react-hook-form from continuing to validate after it's failed validation. Take the following example.

1. I press submit with no value in the input. Required error is triggered.
2. I then paste a value into the input field that do not pass the pattern validation, at this point I want it to only validate again after submit it pressed but it validates immediately.

Imagine I needed to post the value to the backend for validation I wouldnt want it to post every time I added a new value or pasted a value in the input.

Here's my sandbox. https://codesandbox.io/s/clever-shape-r37j9y?file=/src/App.tsx:74-89

Answer 1

You can change default validation mode by using mode and reValidateMode. please check https://react-hook-form.com/api/useform for more details. In your codesandbox, use useformas below. tested and working fine.

 ...
  const { handleSubmit, control } = useForm({
    mode: "onSubmit",
    reValidateMode: "onSubmit",
  });
...