带有 Chakra UI 的 React-hook-form 未在 NextJS 中显示验证错误消息

Posted 2023-03-23

【中文标题】带有 Chakra UI 的 React-hook-form 未在 NextJS 中显示验证错误消息

【英文标题】：React-hook-form with Chakra UI not displaying validation error message in NextJS

【发布时间】：2020-12-25 06:25:31

【问题描述】：

我一直在尝试使用 React-hook-form 和 Chakra UI 组件库在 Next.js 中实现登录表单，但我无法弄清楚为什么我的表单验证错误消息不会显示，尽管遵循了 React -hook-form 文档相当彻底。我将其设置为用户名必须为 2-30 个字符长，密码必须至少为 8 个字符长；两个输入字段都是必需的。在有效的表单提交上，将弹出一个警报，表示提交成功。但是，在提交无效表单时，错误消息应显示在无效输入下方，但事实并非如此。但是，我注意到无效的输入字段将在提交时获得焦点。

这是我正在查看的内容：https://codesandbox.io/s/quirky-wave-jgpwf

提前致谢。

【参考方案1】：

我猜这可能是因为<FormControl isInvalid=errors.name>，您检查了errors.name，但您没有name。你的组件被命名为username、password

我建议你先尝试console.log(errors)看看里面有什么。

<FormControl isInvalid=errors.username || errors.password> 可能会有所帮助。