在具有相同名称的动态表单上进行Yup验证

时间:2020-11-02 23:34:04

标签: reactjs validation yup react-hook-form

我在React中有一个表单,可以动态添加/删除最小/最大输入。我正在尝试验证每一行,在我的inputMin模式中,inputMax小于react hook form,而yup则较小。仅当两个输入字段都不为空时才应用验证。

const validationSchema = yup.object().shape({
  inputMin: yup
    .when("inputMax", {
      is: v => v > 0,
      then: number().lessThan(ref("inputMax"), "Min should be less than Max")
  })
});

const { register, triggerValidation } = useForm({ validationSchema });

React组件中由用户动态添加/删除的HTML:

    <input name="inputMin" type="number" ref={register} />
    <input name="inputMax" type="number" ref={register} />

当最大/最小行只有一行时,此功能有效。但是当有2行时,验证效果不佳。

          MIN     MAX
ROW1 :     0       5
ROW2 :     9       5  <-- (the triggerValidation doesn't catch this error)

如何告诉它正确地对每一行的同级inputMin验证inputMax

0 个答案:

没有答案