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

Question

我想在加载表单时显示字段错误。提交后没有。

对：

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

福米克：

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

感谢帮助！

Answer 1

你可以像这样使用错误和触摸道具

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

Answer 2

简单的答案是

将 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：如何在提交前立即验证表单？

Formik + Yup: How to immediately validate form before submit?

reactjs

yup

formik

简单的答案是