简体   繁体   English

Formik + Yup:如何在提交前立即验证表单?

[英]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!感谢帮助!

The simple answer is简单的答案是

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] .如果您使用来自formikErrorMessage ,它将不起作用,因为它会检查 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM