使用react-hook-form的多步骤表单为何进入第4页时自动提交？

问题现象 #

使用react-hook-form、zod和shadcn构建多步骤表单，点击「下一步」按钮切换步骤，当currentFormPage变为4时，processForm函数会自动被调用，而非点击「Submit」按钮才触发。

原因分析 #

1. 嵌套表单标签导致异常：代码中同时使用了shadcn的<Form>组件和原生<form>标签嵌套，HTML不允许表单嵌套，浏览器处理这种非法结构时会出现意外行为，触发自动提交。
2. 缺少步骤验证逻辑：当前点击「下一步」直接切换步骤，未验证当前步骤字段的合法性，可能导致后续步骤触发验证通过后意外提交。

解决方案 #

1. 移除嵌套的原生

标签 #

将原生标签删除，把onSubmit事件直接绑定到shadcn的<Form>组件上，这是shadcn Form组件的正确用法：

// 修正后的return部分
return (
  <Form 
    {...form} 
    onSubmit={form.handleSubmit(processForm)} 
    className="space-y-8"
  >
    {/* 步骤内容 */}
    {currentFormPage === 1 && (
      <>
        //...步骤1的表单字段
      </>
    )}

    {currentFormPage === 2 && (
      <>
        //...步骤2的表单字段
      </>
    )}

    {currentFormPage === 3 && (
      <>
        //...步骤3的表单字段
      </>
    )}

    {currentFormPage === 4 && (
      <>
        //...步骤4的表单字段
      </>
    )}

    {/* 按钮逻辑 */}
    {currentFormPage === 4 ? (
      <Button type="submit">Submit</Button>
    ) : (
      <Button type="button" onClick={goToNextPage}>
        Next
      </Button>
    )}
  </Form>
)

2. 添加步骤验证（可选但推荐） #

为了确保用户填写完当前步骤的必填字段才能进入下一步，在goToNextPage函数中添加当前步骤的验证逻辑：

// 假设每个步骤对应需要验证的字段key
const stepFields = {
  1: ["title", "email", "fullName"],
  2: ["department", "dateOfEvent", "purpose"],
  3: ["startingTime", "endingTime", "doesHaveDryRun"],
  4: [] // 最后一步不需要验证，直接提交
};

const goToNextPage = async () => {
  // 验证当前步骤的字段
  const result = await form.trigger(stepFields[currentFormPage]);
  if (result) {
    // 验证通过，切换步骤
    setCurrentFormPage(prev => prev + 1);
  }
};

3. 修正初始步骤值（可选） #

当前currentFormPage初始值为0，页面加载时不会渲染任何步骤内容，建议将初始值设为1，让用户打开页面直接看到第一步：

const [currentFormPage, setCurrentFormPage] = useState(1);

额外说明 #

• shadcn的<Form>组件已经封装了原生表单的功能，无需再嵌套原生<form>标签，否则会引发浏览器兼容性问题。
• 使用form.trigger()可以针对指定字段触发验证，确保用户完成当前步骤的必填项后才能继续，提升表单体验。

内容的提问来源于stack exchange，提问作者Stykgwar