Reactjs 使用Reaction钩子窗体验证可选字段

我正在处理一个带有一些可选字段的表单，只有在输入时才需要验证这些字段.然而，即使没有输入，react hook form也会返回一个验证错误.我也试着设置:

required: {
value: false,
message: "This field is not required"
}

但即使未输入任何输入，它仍会返回验证错误.

下面是仅在输入时才需要验证的其中一个字段的代码片段.

<div className={styles.formInputFile}>
          <label htmlFor="ref_letter">
            Reference Letter (For Doctorate and Diploma Courses)
          </label>
          <Controller
            control={control}
            name={"reference_letter"}
            rules={{
            required: {
              value: refLetterRequired();
              message: "This is field is required",
},
              validate: {
                fileSize: (file) => {
                  return (
                    file?.size < 2000100 &&
                    "File size shouldn't be more than 2MB!"
                  );
                },
                acceptedFormats: (file) => {
                  return (
                    ["image/png", "image/jpeg", "application/pdf"].includes(
                      file?.type
                    ) || "Only JPEG, PNG and PDF files are accepted!"
                  );
                },
              },
            }}
            render={({ field: { value, onChange, ...field } }) => {
              return (
                <input
                  {...field}
                  value={value?.fileName}
                  onChange={(event) => {
                    onChange(event.target.files[0]);
                  }}
                  type="file"
                  id="rererence_letter"
                  accept=".png, .jpeg, .pdf"
                />
              );
            }}
          />
          <p>{errors.reference_letter?.message}</p>
        </div>

第二次编辑:

该表单是一个多步骤表单，在用户可以移动到下一步之前，每一步都需要没有错误.下面是控制该字段的所有代码片段.即使有正确的输入并且该字段不是必填项，我也不断收到验证错误.

  const certCourses = [
    "Certificate in D",
    "Certificate in t",
    "certificate in H",
    "Certificate in P",
    "Certificate in Pus",
    "Certificate Hec Diseases",
    "Certificate in He",
  ];

  const refLetterRequired = () => {
    for (let i = 0; i < certCourses.length; i++) {
      if (watch("proposed_course") === certCourses[i]) return false;
    }
    return true;
  };

期望值.如果所选的"Proposed_Course"不在"certCourses"中，则该字段应为必填字段，否则该字段不应为必填字段.

Code controlling "next" button of the multi-step form:

  const next = async (e) => {
    const field = steps[currentStep].fields;
    const output = await trigger(field);
    if (!output) return;
    setValue(e.target.name, e.target.value, {
      shouldDirty: true,
      shouldValidate: true,
      shouldTouch: true,
    });
    setCurrentStep(currentStep + 1);
  };

const [currentStep, setCurrentStep] = useState(0);




const steps = [
  {
    name: "step 1",
    description: "Personal Information",
    fields: [
      "title",
      "surname",
      "first_name",
      "gender",
      "middle_name",
      "maiden_name",
      "religion",
      "birth_date",
      "nationality",
      "state_of_origin",
      "disability",
    ],
  },
  {
    name: "step 2",
    description: "Next of Kin Information",
    fields: [
      "next_of_kin_name",
      "next_of_kin_address",
      "next_of_kin_relationship",
      "next_of_kin_phone",
      "next_of_kin_occupation",
    ],
  },
}