Why is on-blur validation occurring when submitting the form?

[malc-adams]

Trying to achieve

I’m trying to create asynchronous validation, using react-hook-form, as I’m aiming to populate my forms with errors which come from the backend, not frontend.
I’ve put together an example of the issue I face, using:

• Single text input.
• Submit button.
• “Dummy” backend, responsible for carrying out asynchronous validation and returning any errors.
• Backend log, listing all of the activity which is going on in the backend.

Example: https://codesandbox.io/p/sandbox/react-hook-form-8rnkxg

Required functionality

• The text input should self-validate with the backend whenever the cursor is moved away (onblur). However, it should not do this until after the first form submission has occurred.
• The submit button should submit the form to the backend whenever it’s clicked and receive a response containing any possible validation errors. If there are any errors after the first submission, the button should disable itself until they are rectified. Submitting the form should never force the text input to self-validate as this would cause multiple validation requests if there were to be many form inputs.

Issue

The issue which I’m experiencing is that, after the first submission (on the second submission and onwards), it forces the text input to self-validate before submission. As mentioned, this would be very inefficient with more forms inputs. Instead, I need the submit button to submit the form and return with any errors, just like it does on the first submission.

Instructions for simple replication of the issue

Using the demo on the link above:

1. Enter some text in the text input.
2. Click outside the input and note that there is no validation. This is correct.
3. Observing the black backend log, below the form, click the submit button and note that the form submits without carrying out validation beforehand. This is correct as the validation occurs as part of the form submission request and responds with a collection of errors, should they exist.
4. Click the submit button again and note that, this time, the form forces the input to self-validate before submitting. This is incorrect as no onblur has occurred on the input.

Further information

There are a couple of lines of configuration within the code which I’ll point out, to save wading through and trying to understand it:

• In the text input component, I’ve added this rule to stop the input self-validating, onblur, before the first submission of the form has occurred:

rules={{ validate: !formState.isSubmitted ? undefined : validation }}

• I initialised the useForm hook with the following property to ensure that the text input self-validates, “onblur”, after the first submission of the form has occurred. This stops it validating “onchange”:

reValidateMode: 'onBlur'