Yup中的条件验证 [英] Conditional Validation in Yup

问题描述

我有一个电子邮件字段，仅在选中复选框(布尔值为true)时才会显示.提交表单后，如果选中此复选框(布尔值为true)，则仅此字段是必填字段.

I have an email field that only gets shown if a checkbox is selected (boolean value is true). When the form get submitted, I only what this field to be required if the checkbox is checked (boolean is true).

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

This is what I've tried so far:

    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中得到了错误:

I've tried several other variations, but I get errors from Formik and 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

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收到验证错误.我究竟做错了什么?

And I get validation errors from Yup as well. What am I doing wrong?

推荐答案

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

You probably aren't defining a validation rule for the showEmail field.

我已经添加了CodeSandox来对其进行测试:

I've done a CodeSandox to test it out and as soon as I added:

showEmail: yup.boolean()

该表单已正确开始验证，并且未引发任何错误.

The form started validation correctly and no error was thrown.

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

对于将来，这是正确的验证模式:

And for future this was the correct validation schema:

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

这篇关于Yup中的条件验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！