form-level `onSubmit` errors with path don't clear on change

Schema with

.superRefine()

.superRefine()

targeting individual fields via path:

const schema = z
  .object({
    name: z.string(),
    email: z.string(),
  })
  .superRefine((v, ctx) => {
    if (v.name || v.email) return;
    ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Required", path: ["name"] });
    ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Required", path: ["email"] });
  });

const schema = z
  .object({
    name: z.string(),
    email: z.string(),
  })
  .superRefine((v, ctx) => {
    if (v.name || v.email) return;
    ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Required", path: ["name"] });
    ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Required", path: ["email"] });
  });

Form setup:

const form = useForm({
  defaultValues: { name: "", email: "" },
  validators: { onSubmit: schema },
});

const form = useForm({
  defaultValues: { name: "", email: "" },
  validators: { onSubmit: schema },
});

Works: Submit empty → both fields show errors via

field.state.meta.errors

field.state.meta.errors

. Path routing works.
Broken: Type into name → errors on both fields persist until next submit.
Workaround: Add field-level

onChange

onChange

onChangeListenTo

onChangeListenTo

on every field:

const FIELDS = ["name", "email"] as const;
const onChangeValidate = (fieldName: string) =>
  ({ fieldApi }) => {
    if (fieldApi.form.state.submissionAttempts === 0) return undefined;
    const result = schema.safeParse(fieldApi.form.state.values);
    if (result.success) return undefined;
    return result.error.issues.find((i) => i.path?.[0] === fieldName)?.message;
  };
// on each field:
<form.Field
  name="name"
  validators={{
    onChange: onChangeValidate("name"),
    onChangeListenTo: [...FIELDS],
  }}
/>

const FIELDS = ["name", "email"] as const;
const onChangeValidate = (fieldName: string) =>
  ({ fieldApi }) => {
    if (fieldApi.form.state.submissionAttempts === 0) return undefined;
    const result = schema.safeParse(fieldApi.form.state.values);
    if (result.success) return undefined;
    return result.error.issues.find((i) => i.path?.[0] === fieldName)?.message;
  };
// on each field:
<form.Field
  name="name"
  validators={{
    onChange: onChangeValidate("name"),
    onChangeListenTo: [...FIELDS],
  }}
/>

This works but feels redundant. The form already has the schema. Can I make the whole thing simpler? I want to keep my validation logic close to the schema, but here the validation is very scattered.

form-level `onSubmit` errors with path don't clear on change

Schema with

.superRefine()

.superRefine()

targeting individual fields via path:

const schema = z
  .object({
    name: z.string(),
    email: z.string(),
  })
  .superRefine((v, ctx) => {
    if (v.name || v.email) return;
    ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Required", path: ["name"] });
    ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Required", path: ["email"] });
  });

const schema = z
  .object({
    name: z.string(),
    email: z.string(),
  })
  .superRefine((v, ctx) => {
    if (v.name || v.email) return;
    ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Required", path: ["name"] });
    ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Required", path: ["email"] });
  });

Form setup:

const form = useForm({
  defaultValues: { name: "", email: "" },
  validators: { onSubmit: schema },
});

const form = useForm({
  defaultValues: { name: "", email: "" },
  validators: { onSubmit: schema },
});

Works: Submit empty → both fields show errors via

field.state.meta.errors

field.state.meta.errors

. Path routing works.
Broken: Type into name → errors on both fields persist until next submit.
Workaround: Add field-level

onChange

onChange

onChangeListenTo

onChangeListenTo

on every field:

const FIELDS = ["name", "email"] as const;
const onChangeValidate = (fieldName: string) =>
  ({ fieldApi }) => {
    if (fieldApi.form.state.submissionAttempts === 0) return undefined;
    const result = schema.safeParse(fieldApi.form.state.values);
    if (result.success) return undefined;
    return result.error.issues.find((i) => i.path?.[0] === fieldName)?.message;
  };
// on each field:
<form.Field
  name="name"
  validators={{
    onChange: onChangeValidate("name"),
    onChangeListenTo: [...FIELDS],
  }}
/>

const FIELDS = ["name", "email"] as const;
const onChangeValidate = (fieldName: string) =>
  ({ fieldApi }) => {
    if (fieldApi.form.state.submissionAttempts === 0) return undefined;
    const result = schema.safeParse(fieldApi.form.state.values);
    if (result.success) return undefined;
    return result.error.issues.find((i) => i.path?.[0] === fieldName)?.message;
  };
// on each field:
<form.Field
  name="name"
  validators={{
    onChange: onChangeValidate("name"),
    onChangeListenTo: [...FIELDS],
  }}
/>

This works but feels redundant. The form already has the schema. Can I make the whole thing simpler? I want to keep my validation logic close to the schema, but here the validation is very scattered.

form-level `onSubmit` errors with path don't clear on change

form-level `onSubmit` errors with path don't clear on change

Similar Threads