提交按钮无法触发onSubmit函数，请求排查原因

核心原因：Zod校验拦截了提交动作 #

你的signupSchema中定义了必填字段verifyCode和verifyCodeExpiry，但在表单组件里既没有添加对应的输入项，也没有在useForm的defaultValues中设置这两个字段的默认值。react-hook-form结合zod resolver时，只要有必填字段未通过校验，就会直接拦截提交流程，不会执行onSubmit函数。

另外，性别选择组件（Select）存在绑定不完整的问题：只绑定了onChange，没有传入field.value，可能导致gender字段值无法正确同步，也可能触发额外的校验失败。

修复方案 #

方案1：调整Zod Schema（如果这两个字段不是注册时必填） #

如果verifyCode和verifyCodeExpiry是后续流程使用的字段，不是注册时必须填写的，将它们设为可选字段：

// 修改后的signupSchema.ts
import { z } from "zod";

const signupSchema = z.object({
  firstName: z.string().min(1, { message: "First name is required" }),
  lastName: z.string().min(1, { message: "Last name is required" }),
  email: z
    .string()
    .min(1, { message: "Email is required" })
    .email({ message: "Please use a valid email address" }),
  password: z.string().min(1, { message: "Password is required" }),
  gender: z.enum(["male", "female", "other"]),
  verifyCode: z.string().min(1, { message: "Verify code is required" }).optional(),
  verifyCodeExpiry: z.date({
    required_error: "Verify code expiry is required",
  }).optional(),
  isVerified: z.boolean().default(false),
  githubId: z.string().optional().default(""),
  googleId: z.string().optional().default(""),
});

export default signupSchema;

方案2：补充表单输入项（如果这两个字段是注册必填） #

在表单中添加verifyCode的输入框和verifyCodeExpiry的日期选择器，并更新defaultValues：

// 在page.tsx的defaultValues中补充字段
const form = useForm<z.infer<typeof signupSchema>>({
  resolver: zodResolver(signupSchema),
  defaultValues: {
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    gender: "male",
    verifyCode: "",
    verifyCodeExpiry: new Date(), // 设置默认日期
  },
});

// 在表单中添加对应的FormField
<FormField
  control={form.control}
  name="verifyCode"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Verify Code</FormLabel>
      <FormControl>
        <Input placeholder="Verify Code" {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>
<FormField
  control={form.control}
  name="verifyCodeExpiry"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Verify Code Expiry</FormLabel>
      <FormControl>
        <Input type="date" {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

修复Select组件绑定 #

确保性别选择组件正确绑定field的值：

<Select value={field.value} onValueChange={field.onChange}>
  <FormControl>
    <SelectTrigger>
      <SelectValue placeholder="Select gender" />
    </SelectTrigger>
  </FormControl>
  <SelectContent>
    <SelectItem value="male">Male</SelectItem>
    <SelectItem value="female">Female</SelectItem>
    <SelectItem value="other">Other</SelectItem>
  </SelectContent>
</Select>

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