基于Yup的表单验证问题：未触碰字段提前显示错误

你遇到的问题核心是：Formik默认会在任意字段变更时触发全表单验证，而你当前仅通过formik.errors判断错误状态，不管用户有没有触碰过该字段，只要验证不通过就显示错误样式。

解决方案一：结合touched对象控制错误显示（推荐） #

Formik提供了touched对象，用来标记用户是否已经触碰过某个字段。我们需要：

1. 给每个TextField添加onBlur={formik.handleBlur}，让Formik记录字段的触碰状态
2. 修改error属性的判断逻辑，只有当字段被触碰过且存在错误时，才显示错误状态

修改后的完整代码：

import { useFormik } from 'formik';
import * as yup from 'yup';
import TextField from '@mui/material/TextField';
import ButtonDefault from './ButtonDefault'; // 假设你的按钮组件路径正确

const formSchema = yup.object().shape({
  surname: yup.string().required("姓氏不能为空"),
  name: yup.string().required("名字不能为空"),
});

export default function Form() {
  const formik = useFormik({
    initialValues: {
      surname: "",
      name: "",
    },
    validationSchema: formSchema,
    onSubmit: () => {
      // 提交逻辑
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <TextField
        focused
        color="secondary"
        sx={{
          m: 0.5,
          marginBottom: 3,
        }}
        id="surname"
        name="surname"
        label="全名"
        value={formik.values.surname}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur} // 新增：标记字段为已触碰
        error={!!formik.touched.surname && !!formik.errors.surname} // 修改判断逻辑
        helperText={formik.touched.surname && formik.errors.surname} // 可选：同时控制错误提示文本的显示
      />
      <TextField
        focused
        color="secondary"
        sx={{
          m: 0.5,
          marginBottom: 3,
        }}
        id="name"
        name="name"
        label="名字"
        value={formik.values.name}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur} // 新增：标记字段为已触碰
        error={!!formik.touched.name && !!formik.errors.name} // 修改判断逻辑
        helperText={formik.touched.name && formik.errors.name} // 可选：同时控制错误提示文本的显示
      />
      <ButtonDefault text="开始分析" type="submit" />
    </form>
  ) 
}

解决方案二：调整Formik的验证时机 #

如果你不需要实时验证，只想在提交表单时才触发全表单验证，可以在Formik配置中关闭validateOnChange：

const formik = useFormik({
  initialValues: {
    surname: "",
    name: "",
  },
  validationSchema: formSchema,
  validateOnChange: false, // 关闭字段变更时的验证
  onSubmit: () => {
    // 提交逻辑
  },
});

这种方式下，错误只会在用户点击提交按钮后显示，适合对实时验证需求不高的场景。

内容的提问来源于stack exchange，提问作者Ives E.