Skip to content

Zod errors from server action aren't propagated to field error. #1704

@AdamZajler

Description

@AdamZajler

Describe the bug

Hi :)

I'm trying to implement a tanstack form in my project, but I've encountered a problem.
Namely, validation errors from the server-side action using the ZOD aren't being sent to the form's inputs. They're visible in state and the form itself, but they're not visible in field.state.meta.errors 🙆‍♀️

I followed the official guide and some YouTube tutorials, but there aren't enough examples online for this scenario :/

I'd like to avoid returning my own object from "zodErrors" and parsing it in the client component; I'd like to use the returned function from createServerValidate.

I validate all the code in onBlur and onSubmit using the ZOD scheme => and everything works. ✔️

However, when I do the same in the server action:

const serverValidate = createServerValidate({
onServerValidate: formSchema,
});

the errors don't get sent to the fields. They're visible in state and form, but they don't propagate downstream.

Normal behavior

Validation with ZOD, from onBlur / onChange:

Image Image

Behavior when errors are comming from server action

Image Image

Your minimal, reproducible example

https://codesandbox.io/p/github/AdamZajler/tanstack-form-nextjs-mui-server-action-zod/main // https://github.com/AdamZajler/tanstack-form-nextjs-mui-server-action-zod

Steps to reproduce

  1. Run project
  2. Enter some values, for ex. firstName: 123 and random valid e-mail address
  3. Press enter
  4. Now you will be seing a VALID response, all errors will be visible under inputs
  5. Now fill form with firstName with required length, ex. 123456
  6. Now errors will not be shown under inputs

Expected behavior

Errors from server-side field validation will appear under specific fields in the client component; just like with onBlur/onChange validation, because the error format is the same

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • Ubuntu 24
  • Chrome

TanStack Form adapter

react-form

TanStack Form version

v1.19.2

TypeScript version

v5.9.2

Additional context

Has anyone encountered this problem? How did the list solve it? Can anyone provide a working example?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions