基于shadcn、react-hook-form、Next.js：未完成首步表单时禁用Next按钮

要实现未完成第一步表单时禁用Next按钮的功能，核心是利用react-hook-form的验证能力来判断字段是否符合要求，具体步骤如下：

1. 给第一步字段添加验证规则 #

首先确保你的表单配置了必填验证，以zod为例（shadcn通常搭配zod使用），定义第一步字段的校验规则：

import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

// 定义表单校验规则
const formSchema = z.object({
  title: z.string().min(1, "标题必填"),
  email: z.string().email("邮箱格式无效").min(1, "邮箱必填"),
  fullName: z.string().min(1, "姓名必填"),
  // 其他页面字段可后续补充
});

// 初始化表单并绑定校验规则
const form = useForm({
  resolver: zodResolver(formSchema),
  defaultValues: {
    title: "",
    email: "",
    fullName: "",
  },
});

2. 获取表单验证状态 #

从react-hook-form的formState中解构出验证相关状态：

const { formState: { isValid, errors } } = form;

3. 控制Next按钮的禁用状态 #

修改Next按钮的disabled属性，当处于第一页且表单未通过验证时禁用按钮：

<DialogFooter>
  <Button variant="outline" onClick={goToPreviewsPage}>
    Back
  </Button>
  <Button 
    variant="outline" 
    onClick={goToNextPage}
    // 第一页时，表单无效则禁用按钮
    disabled={currentFormPage === 1 && !isValid}
  >
    Next
  </Button>
</DialogFooter>

4. 增强跳转逻辑的安全性 #

即使按钮被禁用，也要在跳转函数中添加验证逻辑，防止用户通过控制台等方式强制跳转：

const goToNextPage = async () => {
  // 第一页跳转前，强制触发字段验证
  if (currentFormPage === 1) {
    const isStepValid = await form.trigger(["title", "email", "fullName"]);
    if (!isStepValid) return;
  }

  if (currentFormPage !== 3) {
    setCurrentFormPage(currentFormPage + 1);
  }
};

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