CodexBloom - Programming Q&A Platform

React Hook Form: Validation Errors Not Displaying for Nested Fields

👀 Views: 448 💬 Answers: 1 📅 Created: 2025-07-18
react react-hook-form validation javascript

I'm stuck trying to I've searched everywhere and can't find a clear answer. I've searched everywhere and can't find a clear answer. This might be a silly question, but I'm using React Hook Form (v7) to handle form validation, but I'm having trouble displaying validation errors for nested fields... I have a form where users can input details about multiple addresses, and I'm trying to validate fields like `address.street` and `address.city`. However, when the validation fails, the behavior messages aren't being shown. I've set up the validation using the `useForm` hook, and I'm trying to access the errors using the `getFieldState` method. Here's a simplified version of my code: ```javascript import React from 'react'; import { useForm, Controller } from 'react-hook-form'; const AddressForm = () => { const { handleSubmit, control, formState: { errors } } = useForm(); const onSubmit = data => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <Controller name="address.street" control={control} rules={{ required: 'Street is required' }} render={({ field }) => <input {...field} />} /> {errors.address?.street && <span>{errors.address.street.message}</span>} <Controller name="address.city" control={control} rules={{ required: 'City is required' }} render={({ field }) => <input {...field} />} /> {errors.address?.city && <span>{errors.address.city.message}</span>} <button type="submit">Submit</button> </form> ); }; export default AddressForm; ``` I've tried checking if I'm accessing `errors` correctly, but I keep getting `undefined` for the nested properties. I also explored the documentation but couldn’t find a clear example for nested fields in React Hook Form. Is there something I need to change in my validation rules or in how I access the behavior messages? Any help would be greatly appreciated! For context: I'm using Javascript on Ubuntu. How would you solve this? My development environment is Ubuntu. The stack includes Javascript and several other technologies. Has anyone else encountered this? Any feedback is welcome!