How to stop bleeding of validation errors into a seconde field connected with onChangeListenTo

[dikue]

Hello,

I have the following issue. I am using zod form level validation and have two date input fields.
If I empty the first field the validation errors from the first field bleed into the second field.

import { z } from 'zod';

import { createFormHook, createFormHookContexts } from '@tanstack/react-form';
import { parseISO } from 'date-fns';

const { fieldContext, formContext, useFieldContext } = createFormHookContexts();

const { useAppForm } = createFormHook({
  fieldComponents: {
    InputField,
  },
  formComponents: {},
  fieldContext,
  formContext,
});

const formSchema = z.object({
  a: z.iso.date(),
  b: z.union([z.iso.date(), z.literal('')]),
});

export default function Test() {
  const form = useAppForm({
    defaultValues: {
      a: '',
      b: '',
    } as z.infer<typeof formSchema>,
    validators: {
      onChange: formSchema,
    },
  });

  return (
    <div>
      <form.AppField
        name="a"
        children={(field) => <field.InputField label="A" inputType="date" />}
      ></form.AppField>
      <form.AppField
        name="b"
        children={(field) => <field.InputField label="B" inputType="date" />}
        validators={{
          onChangeListenTo: ['a'],
          onChange: ({ value, fieldApi }) => {
            const a = fieldApi.form.getFieldValue('a');
            if (value && a && parseISO(value) < parseISO(a)) {
              return {
                message: 'Abmeldezeitpunkt muss nach Anmeldezeitpunkt sein.',
              };
            }
            return undefined;
          },
        }}
      ></form.AppField>
    </div>
  );
}

interface InputFieldProps {
  label: string;
  inputType: React.HTMLInputTypeAttribute;
}

function InputField(props: InputFieldProps) {
  const field = useFieldContext<string>();
  return (
    <>
      <label>field {props.label}: </label>
      <input
        value={field.state.value}
        type={props.inputType}
        onChange={(e) => field.handleChange(e.target.value)}
      ></input>
      {field.state.meta.errors.filter(Boolean).map((error, i) => (
        <div key={i} className="text-destructive text-sm">
          {String(error.message)}
        </div>
      ))}
    </>
  );
}

[manimovassagh]

The issue is that when you use form-level Zod validation combined with field-level onChangeListenTo, errors from the Zod schema get mapped to fields based on the Zod path — and when field a is empty/invalid, Zod's error for a can end up bleeding into field b because the form-level validator runs for both fields.

The root of the problem is that z.iso.date() on field a produces an error with path ['a'], but because your b field listens to a via onChangeListenTo: ['a'], it also re-validates when a changes. The form-level validator runs and its errors are distributed across fields — sometimes incorrectly.

Fix: Separate form-level and field-level concerns

Don't mix form-level Zod schema validation with field-level onChangeListenTo validators for the same fields. Instead, pick one approach:

Option A: All field-level (recommended)

export default function Test() {
  const form = useAppForm({
    defaultValues: { a: '', b: '' },
  });

  return (
    <div>
      <form.AppField
        name="a"
        validators={{
          onChange: ({ value }) => {
            if (!value) return 'Date is required'
            if (isNaN(Date.parse(value))) return 'Invalid date'
            return undefined
          },
        }}
        children={(field) => <field.InputField label="A" inputType="date" />}
      />
      <form.AppField
        name="b"
        validators={{
          onChangeListenTo: ['a'],
          onChange: ({ value, fieldApi }) => {
            const a = fieldApi.form.getFieldValue('a')
            if (value && a && parseISO(value) < parseISO(a)) {
              return 'B must be after A'
            }
            return undefined
          },
        }}
        children={(field) => <field.InputField label="B" inputType="date" />}
      />
    </div>
  );
}

Option B: Form-level Zod only

If you want to keep Zod for everything, use .superRefine for the cross-field logic and drop onChangeListenTo:

const formSchema = z.object({
  a: z.iso.date(),
  b: z.union([z.iso.date(), z.literal('')]),
}).superRefine((data, ctx) => {
  if (data.a && data.b && parseISO(data.b) < parseISO(data.a)) {
    ctx.addIssue({
      code: z.ZodIssueCode.custom,
      message: 'B must be after A',
      path: ['b'],
    })
  }
})

The key insight: mixing form-level schema validation with field-level onChangeListenTo creates two overlapping validation pipelines that can produce conflicting error assignments. Stick to one approach per set of related fields.