react-hook-form中handleSubmit的SubmitErrorHandler完全无法触发

问题根源 #

你遇到的情况是浏览器原生表单校验先于React Hook Form的校验触发，直接阻止了表单提交流程，导致handleSubmit的回调（包括onError）完全没机会执行。另外，如果没给字段配置React Hook Form的校验规则，RHF也无法识别错误，自然不会触发错误处理器。

解决步骤 #

1. 禁用浏览器原生校验 #

在form标签上添加noValidate属性，让React Hook Form完全接管表单校验逻辑：

<form onSubmit={formMethods.handleSubmit(onSubmit, onError)} noValidate>
  {/* 表单内容 */}
</form>

2. 配置React Hook Form的校验规则 #

确保你通过register给需要校验的字段设置规则，比如必填项：

const { register, handleSubmit } = useForm();

// 示例：给用户名输入框设置必填校验
<input 
  {...register('username', { 
    required: '用户名不能为空',
  })} 
/>

3. 确认handleSubmit的使用顺序 #

保证onError和onSubmit的定义在handleSubmit调用之前，写法示例：

const onError: SubmitErrorHandler<any> = (error) => {
  console.log('表单错误：', error);
};

const onSubmit: SubmitHandler<any> = (data) => {
  console.log('表单数据：', data);
};

// 渲染表单
<form onSubmit={handleSubmit(onSubmit, onError)} noValidate>
  {/* 表单字段 */}
  <button type="submit">提交</button>
</form>

设置完成后，当表单存在校验错误（比如必填项未填）时，handleSubmit会触发onError回调；校验通过则正常执行onSubmit。

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