Next.js 13中React Hook Form提交按钮失效，handleSubmit未触发求助

你的代码里有两个关键问题导致handleSubmit未被调用：

• 提交按钮类型错误：当前按钮用了type="button"，这类按钮仅触发点击事件，不会触发表单的submit事件，因此绑定的onSubmit逻辑不会执行。
• Form标签的action属性冲突：Next.js 13中，form标签的action属性会关联服务器端Action，这会覆盖客户端的onSubmit处理逻辑，导致React-Hook-Form的提交逻辑失效。

修改后的完整代码： #

"use client"
import '../app/contact-us/index.css'
import {useForm} from 'react-hook-form'

type FormValues = {
    first_name: string
    last_name: string
    email: string
    number: string // 建议改为string类型，电话号码常包含+、空格等非数字字符，number类型无法兼容
    message: string
};

export default function ContactForm () {
    const form = useForm<FormValues>();
    const {register, handleSubmit} = form;

    const submitForm = (data: FormValues) => {
        console.log(data)
    }
    return (
        <div>
            <form onSubmit={handleSubmit(submitForm)}>
                <div className='form-row'>
                    <input {...register("first_name")} required pattern="^[A-Za-z]{3,16}$" type="text" id="first_name" placeholder='First Name' />
                    <input {...register("last_name")} required pattern="^[A-Za-z]{3,16}$" type="text" id="last_name" placeholder='Last Name' />
                </div>
                <div className='form-row'>
                    <input {...register("number")} type="tel" name="number" id="number" placeholder='Phone Number' />
                    <input {...register("email")} type="email" id="email" placeholder='lucky01@gmail.com' />
                    <span id='emailError'></span>
                </div>
                <textarea {...register("message")} id="message" rows={15}></textarea>
                <input className='submit-btn' type="submit" value="Submit" />
            </form>
        </div>
    )
}

额外提示：将number字段的类型从number改为string更合理，因为电话号码通常包含区号符号、空格或连字符等非数字内容，用number类型会丢失这类信息，且无法正确存储。

内容的提问来源于stack exchange，提问作者DevolamiTech