I’ve encountered an inconsistency in the structure of the errors object provided by React Hook Form’s useForm. When validation errors are generated through the resolver, the errors object structure is as expected, with field names as keys. However, when errors are set manually using setError (e.g., to handle server-side validation errors), the structure changes to an array-like format with numerical keys.

I’m using react-hook-form and zod to create a form.
There are cases in which hookform (more specific: getValues()) does not trigger a re-render, which means that either input is not reaching the controller or the controller does not react accordingly.

so I’ve created a multi-step form using shadcn , react-hook form and zod. I’ve created 3 types of zod schema and joined them using z.union from zod. The problem I’m encountering right now is I can still press the next button even though I didn’t complete the input.

I have an email contact form, and now I want to implement validation with React Hook Form and Zod. This seems a lot thougher as I was hoping for.

<StarRatingInput rating={rating} setRating={(newValue: string) => { setRating(newValue); ( document.getElementById(“rating”) as HTMLInputElement ).value = newValue; console.log(“new”, newValue); }} /> <input hidden id=”rating” type=”text” {…register(“rating”)}/> In the code above StarRatingInput is a component that is not really a input element but being used as one. As I can not register hook form inside that component, I created […]