react-hook-form 空输入提交时错误消息无法触发显示的问题咨询

嘿，这个问题我太熟了！React Hook Form在v6版本之后调整了默认的验证触发逻辑，这就是你遇到差异的原因。

问题根源 #

在早期版本（v5及以前），表单提交时会自动验证所有字段，不管用户有没有触摸过输入框。但从v6开始，为了优化性能，默认的验证模式变成了只验证touched（已触摸/已输入过）的字段——这就是为什么你必须点击输入框或者输入内容后，错误才会显示。

快速解决方案：设置mode为onSubmit #

你只需要在调用useForm时配置mode: "onSubmit"，就能恢复到你熟悉的提交时触发全字段验证的行为：

const { register, handleSubmit, formState: { errors } } = useForm({
  mode: "onSubmit" // 关键配置：提交时验证所有字段
});

修改后的完整代码示例 #

这里是调整后的可运行代码，我还优化了错误消息的写法（直接把必填消息写在规则里更简洁）：

import { useForm } from "react-hook-form";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";

function App() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    mode: "onSubmit"
  });

  const submitForm = (data) => {
    console.log("Submitted data:", data);
    // 这里写你的表单提交逻辑
  };

  return (
    <form className="App" onSubmit={handleSubmit(submitForm)}>
      <TextField
        label="Attribution"
        variant="outlined"
        helperText={errors.attribution ? errors.attribution.message : "Who is being quoted?"}
        {...register("attribution", {
          required: "This field cannot be empty",
          minLength: { value: 3, message: "Please enter a longer name (min 3 characters)" },
          maxLength: { value: 50, message: "Please enter a shorter name (max 50 characters)" }
        })}
        error={Boolean(errors.attribution)}
        fullWidth
        margin="normal"
      />
      <Button type="submit" variant="contained" color="primary">
        Submit
      </Button>
    </form>
  );
}

export default App;

额外说明：其他验证模式 #

如果你需要不同的验证时机，React Hook Form还提供了其他mode选项：

• onChange: 输入内容变化时立即验证
• onBlur: 输入框失去焦点时验证
• all: 同时启用onSubmit、onChange、onBlur
• onTouched: 默认模式，仅验证已触摸的字段

但根据你的需求，onSubmit是最匹配的选择。

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