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

Question

我想显示表单安装时的字段错误。提交后没有。
是的:

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

形式:

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

感谢帮助!

Answer 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]。
如果您使用ErrorMessage中的 formik ，它将无法工作，因为它会检查touched[name] === true以显示消息，因此您需要创建自己的显示错误的方式，而仅检查errors[name]。