T
TanStack•4mo ago
evident-indigo

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 /* */;
    }}
/>
<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.
1 Reply
adverse-sapphire
adverse-sapphire•4mo ago
When submitting a form, all validation runs again (submit, blur, change) to ensure the form is valid to submit. If you want to avoid it, you‘ll want to store the state somewhere. As far as I know, you can‘t prevent blur validation when calling handleSubmit (nor should you, in my opinion)

Did you find this page helpful?