React中使用Yup+Formik提交表单时复选框未触发验证的问题

嘿，这个问题我之前做Formik表单的时候也踩过坑！核心原因其实是Formik的ErrorMessage组件默认的“傲娇”行为——它只会在用户真正交互过这个字段（标记为touched），并且字段确实存在错误时，才会显示错误提示。你的复选框如果用户没点击过，哪怕提交时Yup已经校验出它未勾选的错误，ErrorMessage也会因为字段是“未触摸”状态而不渲染提示。

下面给你几个简单好用的解决办法，挑你觉得顺手的来：

方案1：修改ErrorMessage组件，忽略touched状态 #

这是最直接的方法，直接告诉ErrorMessage：只要有错误就显示，不管用户有没有碰过这个字段。你可以用自定义render函数来实现：

<ErrorMessage 
  name="tandc" 
  render={({ error }) => error && <div className="invalid-feedback">{error}</div>} 
/>

或者更简洁一点，用shouldShowError属性指定显示规则：

<ErrorMessage 
  name="tandc" 
  component="div" 
  className="invalid-feedback"
  shouldShowError={(props) => !!props.error}
/>

方案2：提交时手动标记字段为已触摸 #

如果你希望保持ErrorMessage的默认行为，但提交时强制触发所有字段的校验提示，可以在提交逻辑里手动把tandc标记为已触摸。比如在Formik的onSubmit函数里处理：

<Formik
  initialValues={{ email: '', password: '', tandc: false }}
  validationSchema={schema}
  onSubmit={(values, { setSubmitting, setFieldTouched, validateForm }) => {
    // 先把复选框标记为已触摸
    setFieldTouched('tandc', true);
    // 手动校验所有字段
    validateForm().then(errors => {
      if (!errors) {
        // 这里写你的实际提交逻辑
        console.log('表单提交成功:', values);
      }
      setSubmitting(false);
    });
  }}
>
  {/* 你的表单内容 */}
</Formik>

方案3：强化Yup校验规则（可选） #

虽然你的oneOf([true])已经能实现“必须勾选”的要求，但可以显式加上required()让规则更清晰，不过这本身不能解决ErrorMessage不显示的问题，还是需要配合前两个方案之一：

tandc: yup.boolean()
  .required("You must accept the terms and conditions")
  .oneOf([true], "You must accept the terms and conditions")

个人最推荐方案1，改动最小，效果直接，不用折腾提交逻辑~

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