如何配置Formik仅在表单提交时展示校验错误

Formik 原生支持这个配置，不需要额外写复杂自定义逻辑，两步调整就能实现仅提交时展示校验错误的效果：

• 第一步是关闭默认的实时校验触发。Formik 默认会在输入框内容变化、输入框失焦时跑全量校验，这就是你刚点第一个输入框，其他空字段全出错误的原因。在 <Formik> 组件上加两个属性关掉这两个默认触发逻辑就行：

<Formik
  initialValues={initialValues}
  validationSchema={OrderFormSchema}
  validateOnBlur={false}
  validateOnChange={false}
  onSubmit={(values) => { onSubmit(values) }}
>

• 第二步是调整错误提示的渲染判断。你现在的代码只要errors里有对应字段的错误就直接渲染样式，需要把Formik提供的submitCount（表单提交触发次数）也拿出来做判断，只有用户至少点过一次提交（submitCount > 0）的时候，才展示对应字段的错误，参考写法：

{({ errors, submitCount }) => (
  <Form>
    {/* 单字段示例，其余字段复用相同判断逻辑 */}
    <div className="form-item">
      <Field name="lastname" />
      {submitCount > 0 && errors.lastname && (
        <span className="error-tip">{errors.lastname}</span>
      )}
    </div>
    {/* 其余表单内容 */}
    [...]
  </Form>
)}
</Formik>

可选优化：如果你想实现「第一次点提交前完全不弹错误，提交之后用户修改字段时实时更新该字段的错误提示」的效果，不需要把validateOnBlur和validateOnChange设为false，保持默认值即可，只要错误渲染时保留submitCount > 0的前置判断就行。这种模式下提交后用户改内容会自动校验更新提示，也不会出现提交前随便点输入框就全量报错的问题。

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