带有 Chakra UI 的 React-hook-form 在 NextJS 中不显示验证错误消息
React-hook-form with Chakra UI not displaying validation error message in NextJS
我一直在尝试使用 React-hook-form 和 Chakra UI 组件库在 Next.js 中实现登录表单，但我无法弄清楚为什么我的表单验证错误消息尽管非常彻底地遵循 React-hook-form 文档，但不会显示。我将其设置为用户名长度必须为 2-30 个字符，密码长度必须至少为 8 个字符；两个输入字段都是必需的。在提交有效的表单时，将弹出一条警告，表示提交成功。但是，在提交无效表单时，错误消息应显示在无效输入下方，但事实并非如此。但是，我注意到无效的输入字段将在提交时获得焦点。
这是我正在查看的内容：https://codesandbox.io/s/quirky-wave-jgpwf
提前致谢。
我想这可能是因为 <FormControl isInvalid={errors.name}>，您检查了 errors.name，但没有 name。您的组件名为 username、password
我建议你先尝试console.log(errors)看看里面有什么。
<FormControl isInvalid={errors.username || errors.password}> 可能会有帮助。
我一直在尝试使用 React-hook-form 和 Chakra UI 组件库在 Next.js 中实现登录表单，但我无法弄清楚为什么我的表单验证错误消息尽管非常彻底地遵循 React-hook-form 文档，但不会显示。我将其设置为用户名长度必须为 2-30 个字符，密码长度必须至少为 8 个字符；两个输入字段都是必需的。在提交有效的表单时，将弹出一条警告，表示提交成功。但是，在提交无效表单时，错误消息应显示在无效输入下方，但事实并非如此。但是，我注意到无效的输入字段将在提交时获得焦点。
这是我正在查看的内容：https://codesandbox.io/s/quirky-wave-jgpwf
提前致谢。
我想这可能是因为 <FormControl isInvalid={errors.name}>，您检查了 errors.name，但没有 name。您的组件名为 username、password
我建议你先尝试console.log(errors)看看里面有什么。
<FormControl isInvalid={errors.username || errors.password}> 可能会有帮助。