React Hook Form Validation Skips After First Submission - How to implement?
I'm relatively new to this, so bear with me. I'm using React Hook Form (v7.0) in my application, and I'm working with an scenario where the validation logic seems to skip after the first successful form submission. I have a form with several fields, and upon submitting the form for the first time, everything works as expected, the values get submitted, and validation messages are displayed correctly if there are errors. However, after the first submission, subsequent attempts to submit the form bypass the validation, and it appears to submit empty values without triggering the `onSubmit` callback. Here’s a simplified version of my code: ```jsx import React from 'react'; import { useForm } from 'react-hook-form'; const MyForm = () => { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = data => { console.log(data); // Simulate successful submission alert('Form submitted successfully!'); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register('name', { required: true })} placeholder="Name" /> {errors.name && <p>Name is required</p>} <input type="number" {...register('age', { min: 18 })} placeholder="Age" /> {errors.age && <p>Age must be at least 18</p>} <button type="submit">Submit</button> </form> ); }; export default MyForm; ``` I’ve tried resetting the form using `reset()` after a successful submission, but it doesn’t seem to help. I also checked the console for any related behavior messages, but there aren't any. Has anyone encountered this scenario? Is there a specific setting or method I might be missing to ensure the validation runs consistently on every submission? Any insights would be appreciated! This is part of a larger API I'm building. I recently upgraded to Javascript stable. Thanks in advance!