TanStackT
TanStack•9mo ago•
1 reply
ordinary-sapphire

onBlurAsync on a field also called when submitting the form, bug or expected behavior?

I have an email field where I am checking if it already exists in the database on blur:
<form.Field
    name="email"
    validators={{
        onBlurAsync: async ({ value }) => {
            await new Promise((resolve) => setTimeout(resolve, 2_000));
            // Fake check, just for demo purposes
            return value.includes('error') && 'Email already exists, login instead?';
        },
    }}
    children={(field) => {
        return /* */;
    }}
/>


I was surprised to see that when I submit the form this validation step runs again. Is there a way to avoid it?

Bonus question: is there a way to know why field.state.meta.isValidating is 
true
? Ideally I would like to know if it's because the form's onChange validation is running (non async) or if it's the onBlurAsync validaiton running on the field.
Was this page helpful?