Repository navigation
Unable to display Validation Messages with Zod in Next.js #861
Description
Activity
Same issue here
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.
Reacted by Mateusz OwczarekValidation 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
@mariusraupach tnx! that works! @Balastrong great!
This should be fixed now!
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.errorsproperty correctly contains the errors, thefield.state.meta.errorsproperty 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
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
TanStack Form adapter
None
TanStack Form version
0.26.4
TypeScript version
5.5.3
Additional context
No response