React Hook Form中未触碰动态添加输入框的验证触发问题

核心方案1：调整表单验证模式 + 正确注册动态字段 #

默认情况下，React Hook Form 的mode设为onSubmit时，提交时会验证所有字段，但动态添加的字段需要确保注册逻辑正确：

• 初始化useForm时显式设置mode: "onSubmit"，确保提交时遍历所有注册字段执行验证
• 动态添加字段时，使用register正确绑定每个必填字段的路径（比如数组索引形式的字段名）

示例代码：

import { useForm } from "react-hook-form";
import { useState } from "react";

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

  const addMember = () => {
    setMembers(prev => [...prev, {}]);
  };

  const onSave = (data) => {
    // 处理表单提交逻辑
    console.log("提交的成员数据：", data.members);
  };

  return (
    <form onSubmit={handleSubmit(onSave)}>
      <button type="button" onClick={addMember}>添加成员</button>
      
      {members.map((_, index) => (
        <div key={index} className="member-group">
          <input
            {...register(`members[${index}].firstName`, { 
              required: "名字为必填项" 
            })}
            placeholder="名字"
          />
          {errors.members?.[index]?.firstName && 
            <p className="error">{errors.members[index].firstName.message}</p>}

          <input
            {...register(`members[${index}].lastName`, { 
              required: "姓氏为必填项" 
            })}
            placeholder="姓氏"
          />
          {errors.members?.[index]?.lastName && 
            <p className="error">{errors.members[index].lastName.message}</p>}
        </div>
      ))}

      <button type="submit">保存</button>
    </form>
  );
};

核心方案2：手动触发全字段验证 #

如果方案1不生效，可以在提交前手动调用trigger()方法强制验证所有字段：

• 获取trigger方法，在提交回调的最开始执行验证，验证不通过则终止提交流程

示例代码：

const { register, handleSubmit, trigger, formState: { errors } } = useForm({
  defaultValues: {
    members: []
  }
});

const onSave = async (data) => {
  // 手动触发所有字段验证
  const isFormValid = await trigger();
  if (!isFormValid) return;
  
  // 验证通过后执行提交逻辑
  console.log("提交的成员数据：", data.members);
};

如果只想验证动态添加的成员字段，也可以针对性触发：

// 只触发members下的所有字段验证
const isMembersValid = await trigger(Object.keys(getValues()).filter(key => key.startsWith('members')));

注意事项 #

• 确保useForm的shouldUnregister配置为false（默认值），避免动态添加的字段被自动注销，导致提交时不被纳入验证范围
• 注册字段时的路径要准确（比如members[${index}].firstName），确保表单能正确识别字段层级

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