React Hook Form: How to prevent re-triggering validation on field blur when using useForm?
This might be a silly question, but I'm using React Hook Form v7 to manage my forms, and I'm working with an scenario where validation is being triggered on field blur events..... I want to prevent validation from running unless the user submits the form. I have the following code setup: ```javascript import React from 'react'; import { useForm } from 'react-hook-form'; const MyForm = () => { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register('username', { required: true })} placeholder="Username" /> {errors.username && <p>This field is required</p>} <input {...register('email', { required: 'Email is required', pattern: { value: /^[^@\s]+@[^@\s]+\.[^@\s]+$/, message: 'Invalid email' } } )} placeholder="Email" /> {errors.email && <p>{errors.email.message}</p>} <button type="submit">Submit</button> </form> ); }; export default MyForm; ``` I noticed that when I click away from the `username` input, I get the behavior message displayed immediately even though I only want validation to happen upon form submission. I've tried setting the `shouldFocusError` option to `false` in the `handleSubmit` function, but that didn't help. I also read in the documentation about the `mode` option, but I wasn't sure how to set that up correctly. Any advice on how to achieve this behavior would be greatly appreciated! Any suggestions would be helpful. Any advice would be much appreciated. I'm working on a service that needs to handle this. Is there a simpler solution I'm overlooking?