如何在Formik表单提交时获取isValid状态及错误信息？

这里有三种实用的方法可以实现你的需求：

方法一：使用useFormikContext钩子 #

这个钩子能让你在Formik组件包裹的任意子组件里直接获取Formik的全局状态，包括isValid和errors。

步骤如下：

1. 导入钩子

import { useFormikContext } from 'formik';

2. 在组件内获取状态，然后在handleSubmit中使用

// 确保这段代码处于Formik组件的子组件范围内
const { isValid, errors } = useFormikContext();

const handleSubmit = (values: any, formikHelpers: FormikHelpers<any>) => {
  console.log('表单是否有效:', isValid);
  console.log('所有错误信息:', errors);
  // 此处编写你的提交逻辑
};

方法二：调用formikHelpers.validateForm() #

你可以在handleSubmit里主动调用Formik提供的validateForm方法，它会返回验证后的错误对象，通过判断错误对象的键值数量就能得到isValid状态。

代码示例：

const handleSubmit = async (values: any, formikHelpers: FormikHelpers<any>) => {
  // 手动触发验证并获取错误信息
  const errors = await formikHelpers.validateForm();
  const isValid = Object.keys(errors).length === 0;
  
  console.log('表单是否有效:', isValid);
  console.log('所有错误信息:', errors);
  // 后续提交逻辑
};

说明：因为你设置了validateOnChange={false}，Formik在提交时会自动触发一次验证，但手动调用validateForm能确保你拿到最新的验证结果。

方法三：通过Formik的render props传递状态 #

如果你的表单是用Formik的render props方式渲染的，可直接把Formik的状态作为参数传递给handleSubmit。

代码示例：

<Formik
  initialValues={createUser}
  onSubmit={(values, helpers) => handleSubmit(values, helpers, formikProps)}
  validationSchema={Schema}
  validateOnChange={false}
>
  {(formikProps) => (
    <Form>
      {/* 你的表单控件 */}
      <button type="submit">提交</button>
    </Form>
  )}
</Formik>

// 对应的handleSubmit函数
const handleSubmit = (values: any, formikHelpers: FormikHelpers<any>, formikProps: any) => {
  console.log('表单是否有效:', formikProps.isValid);
  console.log('所有错误信息:', formikProps.errors);
};

内容的提问来源于stack exchange，提问作者Greg-A