TanStack
Unable to display Validation Messages with Zod in Next.js
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
- 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
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.
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
