是的，当用户单击提交按钮时，未验证复选框答案

【问题标题】：Yup is not validating a checkbox when the user clicks the submit button是的，当用户单击提交按钮时，未验证复选框
【发布时间】：2020-02-09 11:53:16
【问题描述】：

我的 React 应用程序中有以下 Yup 配置：

 const schema = yup.object().shape({
        email: yup.string()
            .email('E-mail is not valid!')
            .required('E-mail is required!'),
        password: yup.string()
            .min(6, 'Password has to be longer than 6 characters!')
            .required('Password is required!'),
        tandc: yup.boolean()
            .oneOf([true], "You must accept the terms and conditions")
    })

我的表单看起来像这样（使用 Formik）：

 <Form>
                    <div className="form-group">
                        <label >Email
                        <Field type="email" name="email" className="form-control" />
                        </label>
                        <ErrorMessage name="email" component="div" className="invalid-feedback" />
                    </div>
                    <div className="form-group">
                        <label >Password
                        <Field type="password" name="password" className="form-control"  />
                        </label>
                        <ErrorMessage name="password" component="div" className="invalid-feedback" />
                    </div>
                    <div className="form-group">

                        <Field type="checkbox" name="tandc" className="form-check-input"  id="tandc" />
                        <ErrorMessage name="tandc" component="div" className="invalid-feedback" />
                        <label htmlFor="tandc" >I agree to the Terms and Conditions
                        </label>
                    </div>

                    <PrimaryButton label="Login" disabled={isSubmitting} type="submit">
                        Submit
                    </PrimaryButton>
                </Form>

如果用户点击表单上的提交，Yup 会验证电子邮件和密码字段，但忽略复选框字段：

只有先选中然后取消选中条款和条件，才能使复选框验证生效。

如何使它工作，以便在用户仅单击提交按钮时显示错误消息？

【问题讨论】：

.required，我猜？
我试过了，没区别
这个comment 说“如果你将它与 formik 一起使用，请确保你设置了 initialValues = {termsOfService: false}”
@GennadyDogaev 你是对的。我需要设置一个初始值，将其添加为答案，我会标记它。

标签： javascript reactjs formik yup

【解决方案1】：

对于

yup.boolean().oneOf([true],'Message');

您必须将该字段的初始值设置为true 或false。

在你的情况下，它看起来像这样

tandc : false

无论您在哪里设置初始值

【讨论】：

【解决方案2】：

根据 Yup 存储库中的这个issue，

如果您将它与 formik 一起使用，请确保您设置了 initialValues = {termsOfService: false}

【讨论】：

【解决方案3】：

使用

yup.default(false)

或

yup.default(true)

指定默认值

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：stackoverflow.com/help/how-to-answer。祝你好运?

【解决方案4】：

如果您使用的是react-hook-form：

 const schema = yup.object().shape({
        ...
    tandc: yup.bool() // use bool instead of boolean
        .oneOf([true], "You must accept the terms and 
 conditions")
 })

学分：Jason Watmore

【讨论】：