TanStackT
TanStack•7mo ago•
11 replies
popular-magenta

Inconsistent validation timing - first field validates onBlur, subsequent fields validate onChange

Issue Title

TanStack Form: Inconsistent validation timing - first field validates onBlur, subsequent fields validate onChange



Problem: Form validation behavior is inconsistent across fields. The first text field correctly waits until blur to show validation errors, but subsequent text fields show validation errors immediately when the user starts typing.


Current Behavior:
- First field: ✅ Shows errors only after blur
- Subsequent fields: ❌ Shows errors immediately on typing

Configuration:
const form = useAppForm({
  defaultValues,
  validators: {
    onBlur: muCustomZodSchema, 
  },
  // ...
});


Composed Form Component
import TextField from "@internal-library/textfield";
import React from "react";
import { useFieldContext, useFormContext } from "../../../../hooks/form";

export const FormTextField = ({
  error,
  ...textFieldProps
}: {
  error?: string;
} & Omit<
  React.ComponentProps<typeof TextField>,
  "name" | "onChange" | "value" | "onBlur"
>) => {
  const field = useFieldContext<string>();
  const form = useFormContext();


  const displayError =
    field.state.meta.isTouched &&
    !field.state.meta.isValid &&
    !field.state.meta.isValidating 
      ? error || field.state.meta.errors?.[0]?.message
      : undefined;

  return (
    <form.Subscribe selector={(state) => state.isSubmitting}>
      {(isSubmitting) => (
        <TextField
          {...textFieldProps}
          name={field.name}
          value={field.state.value || ""}
          onChange={(event) => field.handleChange(event.target.value)}
          onBlur={field.handleBlur}
          disabled={isSubmitting || textFieldProps.disabled}
          error={displayError}
        />
      )}
    </form.Subscribe>
  );
};


Question: Why would field.state.meta.isTouched and !field.state.meta.isValid both be true during typing for some fields but not others, when using the same component and validation configuration?
Was this page helpful?