我有一个电子邮件字段,只有在选中复选框时才显示(布尔值为true
)。当表单被提交时,如果选中该复选框,我只需要该字段(boolean为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那里得到验证错误。我究竟做错了什么?
答案 0 :(得分:17)
您可能没有为 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")
})
})
}
答案 1 :(得分:12)
Formik作者在这里...
要使Yup.when
正常工作,您必须将showEmail
添加到initialValues
并添加到Yup模式形状中。
通常,使用validationSchema
时,最佳做法是确保表单的所有字段都具有初始值,以便Yup可以立即看到它们。
结果如下:
<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")
})
})
}
/>
答案 2 :(得分:5)
您甚至可以将函数用于复杂情况。函数案例有助于复杂的验证
validationSchema={yup.object().shape({
showEmail: yup.boolean(),
email: yup
.string()
.email()
.when("showEmail", (showEmail) => {
if(showEmail)
return yup.string().required("Must enter email address")
})
})
}
答案 3 :(得分:3)
email: Yup.string()
.when(['showEmail', 'anotherField'], {
is: (showEmail, anotherField) => {
return (showEmail && anotherField);
},
then: Yup.string().required('Must enter email address')
}),
答案 4 :(得分:2)
完全同意@JoãoCunha的回答。只是单选按钮用例的补充。
使用单选按钮作为条件时,可以检查字符串的值而不是布尔值。例如is: 'Phone'
const ValidationSchema = Yup.object().shape({
// This is the radio button.
preferredContact: Yup.string()
.required('Preferred contact is required.'),
// This is the input field.
contactPhone: Yup.string()
.when('preferredContact', {
is: 'Phone',
then: Yup.string()
.required('Phone number is required.'),
}),
// This is another input field.
contactEmail: Yup.string()
.when('preferredContact', {
is: 'Email',
then: Yup.string()
.email('Please use a valid email address.')
.required('Email address is required.'),
}),
});
这是用ReactJS编写的单选按钮,onChange方法是触发条件检查的关键。
<label>
<input
name="preferredContact" type="radio" value="Email"
checked={this.state.preferredContact == 'Email'}
onChange={() => this.handleRadioButtonChange('Email', setFieldValue)}
/>
Email
</label>
<label>
<input
name="preferredContact" type="radio" value="Phone"
checked={this.state.preferredContact == 'Phone'}
onChange={() => this.handleRadioButtonChange('Phone', setFieldValue)}
/>
Phone
</label>
这是单选按钮更改时的回调函数。如果我们使用的是Formik,则setFieldValue是可行的方式。
handleRadioButtonChange(value, setFieldValue) {
this.setState({'preferredContact': value});
setFieldValue('preferredContact', value);
}