如果其中任何一個具有值，則使 Yup 需要多個 Formik 字段

Question

我有一個經過 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(''),
            }),

Answer 1

是的，您可以像使用yup和field5 field4使用when來檢查其他值。 而且您實際上可以同時收聽多個領域。

你必須小心循環依賴

有一些使用參數 noSortEdges 的解決方案，但沒有太多關於它的文檔。 你可以在這里找到它的工作測試。

所以一個可能的解決方案是：

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