Form Validation Not Firing on React Hook Form with Yup Schema - advanced patterns
I'm converting an old project and I've tried everything I can think of but I'm working on a form using React Hook Form (v7.0.0) along with Yup for validation, but I'm working with an scenario where validation is not being triggered as expected on field changes... I've set up my schema as follows: ```javascript import { useForm } from 'react-hook-form'; import * as Yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; const validationSchema = Yup.object().shape({ email: Yup.string().email('Invalid email').required('Email is required'), password: Yup.string().required('Password is required'), }); const MyForm = () => { const { register, handleSubmit, formState: { errors } } = useForm({ resolver: yupResolver(validationSchema), mode: 'onChange', // Trying different modes here }); const onSubmit = data => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input type="text" {...register('email')} /> {errors.email && <p>{errors.email.message}</p>} <input type="password" {...register('password')} /> {errors.password && <p>{errors.password.message}</p>} <button type="submit">Submit</button> </form> ); }; ``` However, when I type in the fields, the behavior messages for `email` and `password` do not appear until I attempt to submit the form. I've tried changing the validation mode to 'onChange' and 'onBlur', but it doesn't seem to make any difference. I even added some console logs in the `onSubmit` function to verify that validation was bypassing completely, and that's the case. If I deliberately trigger validation using the `trigger` method after each change, it performs correctly, but that feels like a workaround rather than a proper solution. Am I missing something in my setup, or is there a specific way to ensure that Yup validation responds immediately to field changes? Any insights or examples would be greatly appreciated! The project is a service built with Javascript. What's the correct way to implement this?