Formik + Yup：如何在提交前立即验证表单？

Posted 2023-02-21

【中文标题】Formik + Yup：如何在提交前立即验证表单？

【英文标题】：Formik + Yup: How to immediately validate form before submit?

【发布时间】：2020-09-05 00:47:41

【问题描述】：

我想在安装表单时显示字段错误。不是在提交之后。

是的：

const validation = Yup.object().shape(
  field: Yup.string().required('Required')
);

福米克：

<Formik
  initialValues=initialValues
  validationSchema=validation
  validateOnMount
>
  ...
</Formik>

感谢您的帮助！

【参考方案1】：

简单的答案是

将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]。

【讨论】：

我找到的最佳答案！谢谢！

【参考方案2】：

你可以像这样使用errors和touched props

<Formik 
    initialValues=initialValues 
    validationSchema=validation 
    validateOnMount 
> 
    props =>  
        const  errors, touched  = props 
        return ( 
            <Form> 
                ... 
                errors.field && touched.field ? <Error>errors.field</Error> : null 
                ... 
            </Form> 
        )
    
</Formik>

【讨论】：

是的，我显示错误，但仅在触及该字段时。在此之前如何查看错误？谢谢！