👀 Views: 33 💬 Answers: 1 📅 Created: 2025-06-23

react react-hook-form validation javascript

I'm following best practices but Quick question that's been bugging me - I'm currently using React Hook Form v7 for a form that includes nested fields, and I'm running into issues with validation not firing as expected. I have a structure like this: ```javascript const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register('user.name', { required: true })} placeholder="Name" /> {errors.user?.name && <p>Name is required</p>} <input {...register('user.email', { required: true })} placeholder="Email" /> {errors.user?.email && <p>Email is required</p>} <button type="submit">Submit</button> </form> ); ``` When I try to submit the form without filling out the fields, I see that the validation messages for `user.name` and `user.email` do not appear. Instead, I get the following behavior in the console: ``` behavior: want to read properties of undefined (reading 'name') ``` I’ve verified that I am registering the inputs correctly, and I've also checked that I’m using the latest version of React Hook Form. I’ve tried restructuring the registration to use `register('user', { required: true })` but that doesn’t work either. Does anyone know how I can get validation to work for nested fields properly? Are there specific practices I should follow when registering nested inputs with React Hook Form? Any help would be appreciated! I'm working on a service that needs to handle this. Has anyone else encountered this? I'm on Debian using the latest version of Javascript. I've been using Javascript for about a year now. Any feedback is welcome!