javascript - 是的,当用户单击提交按钮时,未验证复选框
问题描述
我的 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 会验证电子邮件和密码字段但忽略复选框字段:
如果我先检查然后取消选中条款和条件,我只能使复选框验证起作用。
如何使其工作,以便在用户仅单击提交按钮时显示错误消息?
解决方案
为了
yup.boolean().oneOf([true],'Message');
要工作,您必须将该字段的初始值设置为true
或false
。
在你的情况下,它看起来像这样
tandc : false
无论您在哪里设置初始值
推荐阅读
- node.js - React 如何从 Get 语句中获取信息
- gremlin - How do i set null value to a property of a node in janusgraph?
- django - 不删除的对象
- c# - C# - 如何正确等待另一个类异步提供数据?
- sql - 不使用组时解释 COUNT 返回值
- html - 如何在 .po 翻译文件中使用 HTML 标记
(@lingui/反应) - ios - 固定导航栏位置
- css - 使用 calc() 函数减去两个 css 变量
- html - 是否有可能在选择中断线?
- bootstrap-4 - 如何将按钮放在导航栏上,而不是折叠上