React Hook Form结合Form Action问题：提交无校验直接触发登录

一、提交不触发校验的原因 #

你当前代码直接使用原生<form>的action属性处理提交，完全绕过了React Hook Form（RHF）的校验流程。RHF的校验逻辑是通过form.handleSubmit方法触发的——只有当提交函数被handleSubmit包裹时，才会自动调用你配置的Zod resolver完成校验，校验通过后才会执行后续登录逻辑。

现在的代码里，<form>的action直接调用startTransition(() => handleLogin(formData))，没有经过RHF的校验环节，所以提交时会跳过所有校验，直接调用登录接口。

二、修复方案 #

将<form>的action替换为RHF的onSubmit，并用form.handleSubmit包裹登录处理函数，这样就能触发校验流程：

// 替换原<form>部分
<form
  onSubmit={form.handleSubmit(async (validatedData) => {
    startTransition(async () => {
      // 直接使用RHF校验后的合法数据，无需从FormData手动提取
      const { email, password } = validatedData;
      let user = await signIn(email, password);
      
      // 后续登录逻辑保持不变
      if (isUser(user)) {
        const { email, isSignedIn, error } = user;
        if (error.isError) {
          toast({
            title: `${error?.message}`,
            variant: "destructive",
            action: <XCircle size={25} />,
          });
        } else {
          setSession(user);
          toast({
            title: `${email} logged in successfully!`,
            variant: "success",
            action: <CheckCircle size={25} />,
          });
          redirect("/dashboard");
        }
      }
    });
  })}
  className="w-2/3 space-y-6"
>

修改后，提交表单会先执行Zod校验，失败时自动在FormMessage中显示错误提示，不会调用登录接口；只有校验通过，才会执行登录逻辑。

三、React Hook Form与Form Action能否结合使用？ #

可以结合，需根据场景调整实现方式：

客户端Form Action（React 18+） #

在客户端使用Form Action时，可先手动触发RHF校验，通过后再执行Form Action逻辑：

<form
  action={async (formData) => {
    // 手动触发全量校验
    const isValid = await form.trigger();
    if (!isValid) return; // 校验失败则终止流程

    // 校验通过后执行登录逻辑
    startTransition(() => handleLogin(formData));
  }}
  className="w-2/3 space-y-6"
>

服务器端Form Action（如Next.js） #

如果是服务器端Form Action，可先在客户端完成RHF前端校验，通过后再提交表单到服务器；同时建议在服务器端再次用Zod校验，实现前后端双重校验，提升安全性。

内容的提问来源于stack exchange，提问作者Mustafa Walid Marzouk Mohamed