React-hook-form with Chakra UI not displaying validation error message in NextJS

Question

I've been trying to implement a login form in Next.js with React-hook-form and the Chakra UI component library but I can't figure out why my form validation error messages won't display despite following the React-hook-form docs quite thoroughly. I have it set up such that username must be 2-30 characters long and the password must be at least 8 characters long; both input fields being required. On a valid form submission, an alert will pop up signifying a successful submission. On an invalid form submission, however, an error message should display beneath the invalid input but that isn't the case. I have noticed, however, that the invalid input field will receive focus on submit.

Here is what I'm looking at: https://codesandbox.io/s/quirky-wave-jgpwf

Thanks in advance.

Answer 1

I guess it might be because <FormControl isInvalid={errors.name}> , you check for errors.name, but you don't have that name. Your components are named username, password

I suggest you try to console.log(errors) first to see what are inside.

<FormControl isInvalid={errors.username || errors.password}> might help.