Yup 中的条件验证

javascript reactjs yup formik

2022-08-30 05:16:55

我有一个电子邮件字段，仅当选中复选框时才会显示（布尔值为）。当表单提交时，我只在选中复选框时需要此字段（布尔值为 true）。true

这是我到目前为止尝试过的：

    const validationSchema = yup.object().shape({
       email: yup
             .string()
             .email()
             .label('Email')
             .when('showEmail', {
                 is: true,
                 then: yup.string().required('Must enter email address'),
             }),
        })

我已经尝试了其他几种变体，但是我收到了Formik和Yup的错误：

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined at yupToFormErrors (formik.es6.js:6198) at formik.es6.js:5933 at <anonymous> yupToFormErrors @ formik.es6.js:6198

我也从Yup那里得到了验证错误。我做错了什么？

答案 1

您可能没有为 showEmail 字段定义验证规则。

我做了一个CodeSandox来测试它，一旦我添加：

showEmail: yup.boolean()

表单已正确启动验证，未引发任何错误。

这是网址：https://codesandbox.io/s/74z4px0k8q

对于将来，这是正确的验证架构：

validationSchema={yup.object().shape({
    showEmail: yup.boolean(),
    email: yup
      .string()
      .email()
      .when("showEmail", {
        is: true,
        then: yup.string().required("Must enter email address")
      })
  })
}

答案 2

福尔米克作者在这里...

若要正常工作，必须向 Yup 架构形状添加和添加内容。Yup.whenshowEmailinitialValues

通常，使用时，最佳做法是确保表单的所有字段都具有初始值，以便 Yup 可以立即看到它们。validationSchema

结果将如下所示：

<Formik 
  initialValues={{ email: '', showEmail: false }}
  validationSchema={Yup.object().shape({
    showEmail: Yup.boolean(),
    email: Yup
      .string()
      .email()
      .when("showEmail", {
        is: true,
        then: Yup.string().required("Must enter email address")
      })
  })
}

/>