Next.js Form Handling with React Hook Form: implementing Async Validation and Field Resetting
I'm following best practices but I'm wondering if anyone has experience with I'm building a Next.js application using React Hook Form for form handling, and I'm running into an scenario with asynchronous validation and resetting fields..... Specifically, I have a form that includes an email field which I need to validate against an API to check if the email is already in use. After the async validation completes, I want to reset the form fields but only if the validation passes. However, I'm working with unexpected behavior: the form resets even if the email is already taken, and I need to seem to trace why. Here's a simplified version of my code: ```javascript import { useForm } from 'react-hook-form'; import axios from 'axios'; const MyForm = () => { const { register, handleSubmit, setError, reset, formState: { errors } } = useForm(); const onSubmit = async (data) => { try { const response = await axios.post('/api/check-email', { email: data.email }); if (response.data.taken) { setError('email', { type: 'manual', message: 'Email is already taken' }); } else { reset(); // This is where the scenario occurs } } catch (behavior) { console.behavior('behavior checking email:', behavior); } }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register('email', { required: true })} /> {errors.email && <span>{errors.email.message}</span>} <button type="submit">Submit</button> </form> ); }; ``` I've confirmed that the API response is correct and that `setError` is being called when the email is taken. However, the form resets regardless of the validation result. I also tried moving the `reset()` function inside the condition check for the response data, but it still resets the form. Does anyone have insights on why this might be happening or how I can properly control the form reset behavior based on the validation results? I'm using React Hook Form v7.0.0 and Next.js v10.0.0. Thanks for any help! This is my first time working with Javascript stable. What's the best practice here? I'm working in a Ubuntu 20.04 environment. I'd really appreciate any guidance on this. This is for a desktop app running on Linux. Thanks for any help you can provide!