Auto-submitting the form on blur?

[piotr-sobczyk]

We have a requirement, that there should be no submit button on our form but instead it should auto-submit on every blur and send the data to the server, but only if all the fields are passing the validation.

Currently we do it this way:

<form>
  <input name="field1" ref={register({ required: true })} onBlur={formChanged} />
  <input name="field2" ref={register({ required: true })} onBlur={formChanged} />
  ... //etc
</form>

And our form config and formChanged handler:

const { register, formState, getValues } = useForm<CheckoutAddressData>({
    mode: 'onBlur',
});

const formChanged = () => {
  const { isValid } = formState;
  const formValues = getValues();
  if(isValid) {
     sendValuesToServer(formValues);
  }
}

However this doesn't as expected. When formChanged is triggered after the last field is filled, the isValid is still false. Only after the next blur cycle, the isValid has the true value. I guess the problem is that our onBlur handler runs before library's validation check.

Here's a sandbox demonstrating my problem: https://codesandbox.io/s/musing-dhawan-f13kn .

Am we doing something very non-standard here? Is there a better pattern to get what we want, without the outdated validation issue and without manually listening to onBlur on every form field? Maybe there is some built-in mechanism in the library that I could use instead?

[bluebill1049]

can you share a simple codesandbox?

[piotr-sobczyk]

Sure, here you got: https://codesandbox.io/s/musing-dhawan-f13kn?file=/src/App.js . Please note that you need to blur one extra time to get the expected result.

[bluebill1049]

what about this? https://codesandbox.io/s/stupefied-dirac-b20ln?file=/src/App.js

[piotr-sobczyk]

It looks and works much better! But new it doesn't send new values to the server after the whole form was filled first time (and the user updates the form with another valid set of values).

[pprob]

Did you manage to find a solution in the end? I'm trying to achieve the same behaviour with my form. I've had a play around with bluebill's sandbox and I've tried using reset inside the conditional inside the useEffect to reset the form state & isDirty. However that triggers the useEffect whenever I change an input value because of the dependency on isDirty.
edit: debouncing the network request until a period of no user input seems to work ok for now.

[squiaios]

It would be more interesting to pass an onSubmit function to the formProvider and that this function be executed after the blur event of an input is triggerd (only if the validation is valid), or am I totally wrong?

Somethig like this :

const useFormProps = useForm({
        defaultValues: {url: ''},
        mode: 'onBlur',
        onSubmit: () => {
            console.log('function triggered after blur and validation valid')
        },
        resolver: joiResolver(Joi.object({
            url: Joi.string().uri({scheme: ['https']}),
        })),
    });

[bluebill1049]

can you try to attach onBlur at the form and then subscribe to isValid state?

[squiaios]

Thank you very much, it's working.

Here an exampl :

[younessdev9]

Hey everyone I'm trying to do the same here but it should submit the value on each field blur

[Moshyfawn]

Hey everyone I'm trying to do the same here but it should submit the value on each field blur

The codesandbox in the above comment does exactly that

[nathanmlui]

What if we only want to submit the field that experienced the onBlur event, not the entire form?