Shadcn+Next.js中FormMessage不显示Zod验证错误求助

开发者阿泽

2026-6-22

问题：Shadcn FormMessage 无法显示 Zod 验证错误

问题描述

使用Shadcn、Zod、react-hook-form和Next.js开发时，严格按照文档实现表单，但FormMessage始终无法显示Zod的验证错误。已确认表单错误已按规则生成，但无法传递到FormInput组件中的FormMessage。

核心原因

表单嵌套结构错误，且handleSubmit使用方式不当，破坏了react-hook-form的上下文传递，导致FormMessage无法获取对应字段的错误信息。

修复方案

1. 修正表单结构与提交逻辑

移除嵌套的原生<form>标签，直接使用Shadcn的<Form>组件作为容器，并正确传递提交处理函数：

<Form 
  {...props.form} 
  onSubmit={props.form.handleSubmit(formSubmitHandler)}
  className="flex flex-col space-y-2"
>
  <FormInput
    form={props.form}
    label="Email"
    name="email"
    disabled={formState.isSubmitting}
  />

  <FormInput
    form={props.form}
    label="Password"
    name="password"
    type="password"
    disabled={formState.isSubmitting}
  />

  <Button type="submit" disabled={formState.isSubmitting}>
    {formState.isSubmitting && (
      <Icons.spinner className="w-4 h-4 mr-2 animate-spin" />
    )}
    Sign In
  </Button>

  <Button type="button" variant="link" onClick={onClickForgotPassword}>
    Having trouble signing in?
  </Button>
</Form>

2. 关键说明

Shadcn的<Form>组件已封装原生form元素，嵌套额外form会阻断react-hook-form的上下文传递，导致FormMessage无法获取错误信息。
直接使用props.form.handleSubmit绑定提交函数，才能正确触发表单校验流程，确保错误信息被正确传递到对应字段的FormMessage组件。