how to implement revalidate mode

[FatahChan]

How can I achieve reValidateMode in tanstackfrom

basically, I want to do validation onBlur, but if there is an error on a field and the user fixes it should revalidated it onChange

from UX perspective say you have an email or some other semi complex pattern, I don't want the initial validation to onChange, as the first character will trigger a validation error, I want it to be onBlur, now the user goes to the next field but there is any issue in the email, when the user fixes it I want an immediate feedback

[Jee-vim]

hey uhh any news from this? i have kinda same problem

[LeCarbonator]

It was a bit complicated to implement before, but you can upgrade to the latest version to have access to revalidateLogic

[Tyler-Petrov]

I have a form that uses a Valibot schema for validation. My inputs trigger both the handleBlur and handleChange. I wasn't able to get the form to operate like @FatahChan described without setting the mode to change, triggering the form to validate on blur manually, and hiding the error messages until the field is blurred using field.state.meta.isBlurred

Am I missing something, or is this UX design not the happy path? I'll through in my code (written in Svelte) below:

<script lang="ts">
    import * as v from "valibot";
    import { createForm, revalidateLogic } from "@tanstack/svelte-form";

    const schema = v.object({
        firstName: v.pipe(
            v.string(),
            v.minLength(3, "A first name is required"),
        ),
        lastName: v.pipe(v.string(), v.minLength(3, "A last name is required")),
    });

    const form = createForm(() => ({
        defaultValues: {
            firstName: "",
            lastName: "",
        },
        validationLogic: revalidateLogic({
            mode: "change",
            modeAfterSubmission: "change",
        }),
        validators: {
            onDynamic: schema,
        },
        onSubmit: (data) => {
            console.log(data);
        },
    }));
</script>

<form
    onsubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        form.handleSubmit();
    }}
>
    <form.Field name="firstName">
        {#snippet children(field)}
            <div>
                <input
                    type="text"
                    onblur={(e) => {
                        field.handleBlur();
                        field.validate("change");
                    }}
                    bind:value={
                        () => field.state.value,
                        (value) => field.handleChange(value)
                    }
                />
                {#if field.state.meta.isBlurred}
                    {#each field.state.meta.errors as error}
                        <p style="color: red">{error?.message}</p>
                    {/each}
                {/if}
            </div>
        {/snippet}
    </form.Field>
    <form.Field name="lastName">
        {#snippet children(field)}
            <div>
                <input
                    type="text"
                    onblur={(e) => {
                        field.handleBlur();
                        field.validate("change");
                    }}
                    bind:value={
                        () => field.state.value,
                        (value) => field.handleChange(value)
                    }
                />
                {#if field.state.meta.isBlurred}
                    {#each field.state.meta.errors as error}
                        <p style="color: red">{error?.message}</p>
                    {/each}
                {/if}
            </div>
        {/snippet}
    </form.Field>
    <button type="submit">Submit</button>
</form>