Unable to display Validation Messages with Zod in Next.js

[mariusraupach]

Describe the bug

I am encountering an issue in my Next.js project where I am unable to display validation messages. Although the field.form.state.errors property correctly contains the errors, the field.state.meta.errors property is empty. For validation, I am using Zod.

Your minimal, reproducible example

https://codesandbox.io/p/github/mariusraupach/curly-fiesta/main?import=true&embed=1

Steps to reproduce

1. Enter a value that is not an email address into the input field.

Expected behavior

As a user, I expected to see a validation message indicating that the value must be an email address.

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

• OS: macOS 14.5
• Browser: Google Chrome - Version 126.0.6478.127 (Official Build) (arm64)

TanStack Form adapter

None

TanStack Form version

0.26.4

TypeScript version

5.5.3

Additional context

No response

[stijnvanderlaan]

Same issue here

[mariusraupach]

@stijnvanderlaan

I resolved the issue by adding the following code to the form.Field:

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

The updated field now looks like this:

<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,
  }}
/>;

However, if I understand the maintainer correctly, this is a bug and the mapping should occur automatically. Nevertheless, it would be very helpful to include a “how-to” in the documentation for using a Zod schema.

[Balastrong]

Validation can be defined at field or form level as mentioned in the docs so each field needs its validator as of today.

However, we're planning to expand the feature with #656 soon

[stijnvanderlaan]

@mariusraupach tnx! that works! @Balastrong great!