使用Formik为文件上传表单添加验证，提交后错误未显示

问题根源 #

你的代码存在三个关键问题导致错误提示不显示：

1. validate 函数没有接收Formik传入的表单值，而是依赖外部state，Formik无法正确触发验证逻辑
2. initialValues 中缺少file字段，Formik无法跟踪该字段的状态
3. 自定义的onFileChangeHandler没有将选中的文件同步到Formik的表单值中，导致验证时无法获取正确的文件状态

修复步骤及完整代码 #

1. 修正初始化值

在Formik的initialValues中添加file字段，初始值设为null：

initialValues={{ file: null }}

2. 修复验证函数

让validate函数接收Formik传入的values参数，直接检查values.file是否存在：

function validate(values) {
  let errors = {};
  if (!values.file) {
    errors.file = "请选择要上传的文件";
  }
  return errors;
}

3. 同步文件选择到Formik状态

修改onFileChangeHandler，使用Formik提供的setFieldValue方法更新file字段的值：

const onFileChangeHandler = (e, setFieldValue) => {
  setFieldValue("file", e.target.files[0]);
};

然后在Field组件中传递setFieldValue：

<Field
  className="form-control form-control-lg"
  id="formFileLg"
  type="file"
  name="file"
  onChange={(e) => onFileChangeHandler(e, props.setFieldValue)}
/>

完整修复后的代码

<Formik
  enableReinitialize={true}
  initialValues={{ file: null }}
  onSubmit={callUploadFileApi}
  validate={validate}
  validateOnChange={false}
  validateOnBlur={false}
>
  {(props) => (
    <Form>
      <ErrorMessage
        name="file"
        component="div"
        className="alert alert-warning"
      ></ErrorMessage>
      <fieldset className="form-group">
        <label className="form-label">
          Upload file below (max file size : 200MB)
        </label>
        <Field
          className="form-control form-control-lg"
          id="formFileLg"
          type="file"
          name="file"
          onChange={(e) => onFileChangeHandler(e, props.setFieldValue)}
        />
      </fieldset>
      <p>
        <button type="submit" className="btn btn-primary my-2">
          Share
        </button>
      </p>
    </Form>
  )}
</Formik>

function validate(values) {
  let errors = {};
  if (!values.file) {
    errors.file = "请选择要上传的文件";
  }
  return errors;
}

const onFileChangeHandler = (e, setFieldValue) => {
  setFieldValue("file", e.target.files[0]);
};

说明 #

• 现在点击提交按钮时，Formik会调用validate函数检查values.file，如果未选择文件，会返回errors.file，ErrorMessage组件会自动渲染对应的错误提示
• validateOnChange和validateOnBlur保持false，确保只有提交时才触发验证，符合你的需求

内容的提问来源于stack exchange，提问作者Yogesh Rao