Formik+Yup:如何在提交前立即验证表单? [英] Formik + Yup: How to immediately validate form before submit?
本文介绍了Formik+Yup:如何在提交前立即验证表单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望在装入表单时显示字段错误。不是在提交之后。
是的:
const validation = Yup.object().shape({
field: Yup.string().required('Required')
});
Formik:
<Formik
initialValues={initialValues}
validationSchema={validation}
validateOnMount
>
...
</Formik>
感谢您的帮助!
推荐答案
简单的答案是
将initialTouched
传递给Formik
,该对象将包含要显示错误消息的域的键以及这些键的值true
。
例如
<Formik
initialValues={initialValues}
initialTouched={{
field: true,
}}
validationSchema={validation}
validateOnMount
>
...
</Formik>
但有很多方法可以做到这一点,但您可以创建在初始呈现时调用validateForm
的组件
const ValidateOnMount = () => {
const { validateForm } = useFormikContext()
React.useEffect(() => {
validateForm()
}, [])
// the return doesn't matter, it can return anything you want
return <></>
}
您也可以使用validateOnMount
执行相同的操作,并在要显示错误消息的所有字段上将initialTouched
设置为TRUE(可能您只想在初始装载时显示特定字段的错误消息)。
<Formik
validateOnMount
initialValues={initialValues}
validationSchema={validation}
initialTouched={{
field: true
}}
{...rest}
>
</Formik>
其中initialTouched
应该是一个对象,该对象具有您要验证的所有字段的键,这些字段位于initialValues
中,但值为true
,这意味着您已经接触了该字段。
另一种方法是只将
validateOnMount
传递给Formik
并显示任何错误消息,而不检查touched[name]
。如果您使用
formik
中的ErrorMessage
,它将无法工作,因为它会检查touched[name] === true
是否显示消息,因此您需要创建自己的显示错误的方法,但只检查errors[name]
。
这篇关于Formik+Yup:如何在提交前立即验证表单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文