javascript - 具有 Chakra UI 的 React-hook-form 在 NextJS 中不显示验证错误消息

Question

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

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

提前致谢。

Answer 1

我想这可能是因为 <FormControl isInvalid={errors.name}> , 你检查 errors.name , 但你没有 name .您的组件名为 username , password

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

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