如果其中任何一个具有值,则使 Yup 需要多个 Formik 字段

分享于2022年07月17日 javascript reactjs typescript validation yup 问答
【问题标题】:如果其中任何一个具有值,则使 Yup 需要多个 Formik 字段(Make multiple Formik-fields required with Yup if any of them have a value)
【发布时间】:2022-01-27 02:24:26
【问题描述】:

我有一个经过 Yup 验证的 Formik 表单。我的问题是这三个字段,我们称它们为 Field1 Field2 Field3 (都是字符串),默认情况下都是可选的,但是如果其中任何一个都填写,则它们都是必需的。

我的 validationSchema 会是什么样子才能完成这项工作

我已经有了另外两个字段的起点,如果一个已填写,另一个不再需要,但其中一个必须始终填写,如下所示:

field4: Yup.string()
            .ensure()
            .when('field5', {
                is: '',
                then: Yup.string().required('Please fill out Field4 or Field5'),
            }),
field5: Yup.string()
            .ensure()
            .when('field4', {
                is: '',
                then: Yup.string().required(''),
            }),

  • 您尝试解决这个问题的方法是什么?遇到了什么问题?

【解决方案1】:

yup 中,您可以使用 when 来检查其他值,就像使用 field4 field5 一样。而且您实际上可以同时收听多个领域。

你必须小心循环依赖

有一些使用参数 noSortEdges 的解决方案,但没有太多关于它的文档。你可以找到它的测试工作 here

所以一个可能的解决方案是:

const schema = yup.object().shape(
  {
    field1: yup.string().when(["field2", "field3"], {
      is: (a, b) => a !== undefined || b !== undefined,
      then: yup.string().required("Please fill out Field1, Field2 or Field3")
    }),
    field2: yup.string().when(["field1", "field3"], {
      is: (a, b) => a !== undefined || b !== undefined,
      then: yup.string().required("Please fill out Field1, Field2 or Field3")
    }),
    field3: yup.string().when(["field1", "field2"], {
      is: (a, b) => a !== undefined || b !== undefined,
      then: yup.string().required("Please fill out Field1, Field2 or Field3")
    })
  },
  [["field1", "field2"], ["field1", "field3"], ["field2", "field3"]]
);

  • 您的回答对我帮助很大,只是一个小版本,检查 a !== "" 仍然导致该字段是必需的,即使其中没​​有任何价值。改为检查 a !== undefined 似乎正在工作
  • 太棒了!我用 undefined 编辑了答案。