Handling Conditional Form Validation with React Hook Form v7 - Validation Not Triggering as Expected
I'm currently implementing a form using React Hook Form v7, and I'm facing an issue with conditional validation. I want to validate an input field based on the state of another field. For example, if the user selects 'Yes' from a dropdown, a text input should become required, but if 'No' is selected, the text input should not be required. I've set this up with the `useWatch` hook to observe the dropdown's value, but the validation is not triggering as expected when changing the dropdown value. Here’s a simplified version of my code: ```javascript import React from 'react'; import { useForm, Controller, useWatch } from 'react-hook-form'; const MyForm = () => { const { control, handleSubmit, register, setValue, formState: { errors } } = useForm(); const selectedOption = useWatch({ control, name: 'option' }); const onSubmit = data => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <Controller name='option' control={control} defaultValue='No' render={({ field }) => ( <select {...field}> <option value='No'>No</option> <option value='Yes'>Yes</option> </select> )} /> <input {...register('textInput', { required: selectedOption === 'Yes' ? true : false })} placeholder='Enter something' /> {errors.textInput && <span>This field is required when 'Yes' is selected</span>} <button type='submit'>Submit</button> </form> ); }; ``` I’ve checked the console and the value of `selectedOption` is updating correctly when I change the dropdown, but the validation message doesn’t appear as expected when I switch between 'Yes' and 'No'. I’ve also tried using `setValue` to reset the field value manually when the dropdown changes, but that didn’t help either. Does anyone have insights on why the validation isn't being triggered as expected? Am I overlooking something in the way React Hook Form handles conditional validation?