[英]Formik + Yup: How to immediately validate form before submit?
I want to show field errors when form mounted.我想在安装表单时显示字段错误。 Not after submit.不是提交后。
Yup:是的:
const validation = Yup.object().shape({
field: Yup.string().required('Required')
});
Formik:福米克:
<Formik
initialValues={initialValues}
validationSchema={validation}
validateOnMount
>
...
</Formik>
Thanks for help!感谢帮助!
Pass initialTouched
to Formik
which will be an object with key of the fields you want to show the error message and the value true
for those keys.将initialTouched
传递给Formik
,这将是一个 object,其中包含要显示错误消息的字段的键以及这些键的值true
。
eg例如
<Formik
initialValues={initialValues}
initialTouched={{
field: true,
}}
validationSchema={validation}
validateOnMount
>
...
</Formik>
But there is alot of ways to do this, but you can create an component that call validateForm
on the initial render但是有很多方法可以做到这一点,但是您可以创建一个在初始渲染时调用validateForm
的组件
const ValidateOnMount = () => {
const { validateForm } = useFormikContext()
React.useEffect(() => {
validateForm()
}, [])
// the return doesn't matter, it can return anything you want
return <></>
}
You can also do the same using validateOnMount
and setting initialTouched
to true on all fields you want to display the error message (maybe you only want to show certain field's error message on the initial mount).您也可以使用validateOnMount
并在要显示错误消息的所有字段initialTouched
设置为 true 来执行相同操作(也许您只想在初始装载时显示某些字段的错误消息)。
<Formik
validateOnMount
initialValues={initialValues}
validationSchema={validation}
initialTouched={{
field: true
}}
{...rest}
>
</Formik>
Where initialTouched
should be an object that have keys to all fields that you want to validate that are in initialValues
but with the value true
, which means you already touched that field.其中initialTouched
应该是一个 object ,它具有您要验证的所有字段的键,这些字段位于initialValues
但值为true
,这意味着您已经触摸了该字段。
Another way to do this is only passing validateOnMount
to Formik
and display any error message without checking for touched[name]
.另一种方法是仅将validateOnMount
传递给Formik
并显示任何错误消息而不检查 touch touched[name]
。
If you use ErrorMessage
from formik
, it won't work because it checks for touched[name] === true
to display the message, so you need to create your own way of displaying the error, but only checking for errors[name]
.如果您使用来自formik
的ErrorMessage
,它将不起作用,因为它会检查 touch touched[name] === true
来显示消息,因此您需要创建自己的显示错误的方式,但只检查errors[name]
.
you can use errors and touched props, like this你可以使用错误和触摸道具,像这样
<Formik
initialValues={initialValues}
validationSchema={validation}
validateOnMount
>
{props => {
const { errors, touched } = props
return (
<Form>
...
{errors.field && touched.field ? <Error>{errors.field}</Error> : null}
...
</Form>
)
}
</Formik>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.