Не отправляется форма в react-hook-form?

Question

[Danila232]

Вот компонент формы - валидация работает, но почему то при отправке(нажатии на кнопку "GO") - не вызывается функция onSubmit. Это я понял из-за того что в ней не выполняется ни одно из 3х действий
Подскажите, в чём проблема?

export const Form = () => {

    const [searchParams, setSearchParams] = useSearchParams()

    const {
        register,
        handleSubmit,
        reset,
        formState: {errors}
    } = useForm({mode: 'onBlur'})

    const onSubmit = (data) => {
        console.log(data)
        reset()
        setSearchParams('done')
    }

    return(
        <form id="form" className="form" method="post" onSubmit={handleSubmit(onSubmit)}>

            <div className="form__group">
                <label htmlFor="input-1" className="form__label">Your surname</label>
                <input className="form__input" id="input-1" type="text" placeholder="Your name"
                    {
                        ...register('name', {
                            required: 'Write your name, please',
                            minLength: {
                                value: 2,
                                message: 'At least 2 charackters!'
                            }
                        })
                    }
                />
                {errors?.name && <span className="form__error">{errors?.name?.message}</span>}
                
            </div>


            <div className="form__group">
                <label htmlFor="input-2" className="form__label">Your surname</label>
                <input className="form__input" id="input-2" type="email" placeholder="Your email"
                    {
                        ...register('email', {
                            required: 'Write your email, please',
                            pattern: /^[a-zA-Z0-9. _-]+@[a-zA-Z0-9. -]+\. [a-zA-Z]{2,4}$/,
                        })
                    }
                />
                {errors?.email && <span className="form__error">{errors?.email?.message}</span>}
            </div>


            <div className="form__group">
                <label htmlFor="input-3" className="form__label">Additional comments:</label>
                <textarea className="form__textarea" id="input-3" placeholder="Comments"/>
            </div>


            <button className="form__btn btn" type="submit">GO</button>
        </form>
    )
}

Comments

[szQocks]

Метод убери, да и вообще зачем тебе форма непонтяно, оставил бы просто кнопку с типом button и повесил на неё функию

<button onClick={handleSubmit(onSubmit)}>GO</button>

[Danila232]

szQocks, метод убрал, хотя хз как он влияет, сделал

<button onClick={handleSubmit(onSubmit)}>GO</button>

без изменений, когда кликаешь на GO - почему то курсор снова и снова появляется во 2м поле, где почта, а onSubmit не вызывается

[szQocks]

Danila232, ну видимо валидацию не проходишь, логично

[szQocks]

Danila232,

метод убрал, хотя хз как он влияет, сделал

в сафари с ним баги там есть кое какие, ну или как минимум были год назад примерно

[Danila232]

szQocks, да, почему то валидация не проходит. Но я ввожу корректный email, по паттерну. Если вводить просто символы, не по паттерну - он выдаст предупреждение "Write your email, please" и валидация не пройдёт. А если вводить по паттерну, но предупреждений не будет, но и валидация всё равно не проходит

[szQocks]

Danila232, /(.+)@(.+){2,}\.(.+){2,}/ попробуй этот

[Danila232]

szQocks, да, если честно хз как это получилось, но я паттерн проверки не тот скопировал - вот этот работает /^[a-zA-Z0-9]+@(?:[a-zA-Z0-9]+\.)+[A-Za-z]+$/