Displaying Validation Messages with Zod in Next.js

validators={{
  onChange: userSchema.shape.email,
}}

validators={{
  onChange: userSchema.shape.email,
}}

<form.Field
  name="email"
  children={(field) => {
    console.log(field.state.meta.errors);
    console.log(field.form.state.errors);

    return (
      <>
        <label htmlFor={field.name}>{field.name}</label>
        <input
          onChange={(event) => field.handleChange(event.target.value)}
          type="email"
        />
        <>
          {field.state.meta.isTouched && field.state.meta.errors.length ? (
            <em>{field.state.meta.errors.join(",")}</em>
          ) : null}
          {field.state.meta.isValidating ? "Validating..." : null}
        </>
      </>
    );
  }}
  validators={{
    onChange: userSchema.shape.email,
  }}
/>;

<form.Field
  name="email"
  children={(field) => {
    console.log(field.state.meta.errors);
    console.log(field.form.state.errors);

    return (
      <>
        <label htmlFor={field.name}>{field.name}</label>
        <input
          onChange={(event) => field.handleChange(event.target.value)}
          type="email"
        />
        <>
          {field.state.meta.isTouched && field.state.meta.errors.length ? (
            <em>{field.state.meta.errors.join(",")}</em>
          ) : null}
          {field.state.meta.isValidating ? "Validating..." : null}
        </>
      </>
    );
  }}
  validators={{
    onChange: userSchema.shape.email,
  }}
/>;

  const form = useForm<z.infer<typeof schema>, ReturnType<typeof zodValidator>>({
    validatorAdapter: zodValidator(),
    validators: { onChange: schema },
    async onSubmit({ value }) {
      setErrorMessage(null);
      try {
        await mutation.mutateAsync(value);
      } catch (err) {
        if (isAxiosError(err)) {
          setErrorMessage(err.response?.data?.message);
          return;
        }
        throw err;
      }
    }
  });

  const form = useForm<z.infer<typeof schema>, ReturnType<typeof zodValidator>>({
    validatorAdapter: zodValidator(),
    validators: { onChange: schema },
    async onSubmit({ value }) {
      setErrorMessage(null);
      try {
        await mutation.mutateAsync(value);
      } catch (err) {
        if (isAxiosError(err)) {
          setErrorMessage(err.response?.data?.message);
          return;
        }
        throw err;
      }
    }
  });

const schema = z.object({
  email: z.string().email({ message: 'Must be a valid email' }),
  password: z.string().min(1, 'Required')
});

const schema = z.object({
  email: z.string().email({ message: 'Must be a valid email' }),
  password: z.string().min(1, 'Required')
});

export const joinLookupArrayPath = (path: (string | number)[]): string => {
  return path.reduce<string>((joined, part) => {
    if (isNumber(part)) return joined + `[${part}]`;
    if (!part) return joined;
    if (!joined) return part;
    return joined + '.' + part;
  }, '');
};


export const zodValidate = <S extends z.ZodTypeAny>(schema: S, async = false) => {
  async function validate(currentVals: DeepPartial<z.TypeOf<S>>) {
    const parsed = async ? await schema.safeParseAsync(currentVals) : schema.safeParse(currentVals);
    if (parsed.success) return;
    return parsed.error.issues.reduce<Record<string, string>>((errors, issue) => {
      const path = joinLookupArrayPath(issue.path);
      // Only report on the first message in the form, for now
      // Later we will try to work only with arrays and have each form field handle
      // multiple errors at once
      if (!errors[path]) errors[path] = issue.message;
      return errors;
    }, {});
  }
  return validate;
};

export const joinLookupArrayPath = (path: (string | number)[]): string => {
  return path.reduce<string>((joined, part) => {
    if (isNumber(part)) return joined + `[${part}]`;
    if (!part) return joined;
    if (!joined) return part;
    return joined + '.' + part;
  }, '');
};


export const zodValidate = <S extends z.ZodTypeAny>(schema: S, async = false) => {
  async function validate(currentVals: DeepPartial<z.TypeOf<S>>) {
    const parsed = async ? await schema.safeParseAsync(currentVals) : schema.safeParse(currentVals);
    if (parsed.success) return;
    return parsed.error.issues.reduce<Record<string, string>>((errors, issue) => {
      const path = joinLookupArrayPath(issue.path);
      // Only report on the first message in the form, for now
      // Later we will try to work only with arrays and have each form field handle
      // multiple errors at once
      if (!errors[path]) errors[path] = issue.message;
      return errors;
    }, {});
  }
  return validate;
};