@heroui/react Form组件validationErrors属性不生效求助

可能的解决方向 #

1. 手动为每个Input绑定错误信息

部分UI组件库的Form组件不会自动将validationErrors分发到对应Input，需要手动给每个Input传递error属性：

修改Input部分代码：

<Input size="sm" label="Email" type="email" name="email" error={errors.email}/>
<Input size="sm" label="Password" type="password" name="password" error={errors.password}/>

如果这样错误信息能显示，说明Form的validationErrors属性并未实现自动分发逻辑，需要手动绑定。

2. 调整错误对象的结构

有些UI库要求validationErrors的字段值为数组格式（而非字符串），比如：

{
  email: ["Invalid email address"],
  password: ["Password must be at least 8 characters"]
}

修改错误映射代码：

const formErrors: { [key: string]: string[] } = {};
validation.error.errors.forEach((error) => {
  formErrors[error.path[0]] = [error.message];
});

3. 使用Hero UI官方的表单状态管理钩子

Hero UI大概率提供了配套的表单钩子（如useForm）来自动处理校验和错误展示，替代手动管理errors状态的方式：

"use client";

import { useForm } from "@heroui/react";
import {Card, CardBody, Input, Button, Form, Checkbox, Link} from "@heroui/react";
import { signInSchema } from "@/features/login/schema/login"

export default function Login() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    validationSchema: signInSchema,
  });

  const onSubmit = (data: any) => {
    console.log("Validation Passed:", data);
  };

  return (
    <Card className="w-full max-w-sm">
      <CardBody>
        <Form className="flex flex-col gap-3" onSubmit={handleSubmit(onSubmit)}>
          <h1 className="text-large font-medium">Sign in</h1>
          <Input size="sm" label="Email" type="email" {...register("email")}/>
          <Input size="sm" label="Password" type="password" {...register("password")}/>
          <div className="flex w-full items-center justify-between px-1 py-2">
            <Checkbox name="remember" size="sm">Remember me</Checkbox>
            <Link className="text-default-500" href="#" size="sm">Forgot password?</Link>
          </div>
          <Button className="w-full" color="primary" type="submit">
            Sign In
          </Button>
        </Form>
      </CardBody>
    </Card>
  );
}

这种方式能让Hero UI自动处理校验逻辑、错误状态管理和错误信息展示，避免手动处理的适配问题。

4. 检查Hero UI组件版本

如果以上方法都无效，可能是组件版本的问题，确认@heroui/react是否为最新版本，或者文档描述的validationErrors属性是否有变更。

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