Formik中Yup日期字段即时验证求助：禁止选择未来日期

问题分析 #

你的Yup验证规则本身逻辑正确，但验证仅在提交时触发，核心原因是日期字段的变更事件没有正确触发Formik的即时验证机制，或是Formik的验证触发配置被修改，同时原代码中Yup.object().shape(schema)的写法存在错误（shape需接收字段名与规则的键值对）。

解决步骤 #

1. 修正Yup验证规则的写法 #

首先要确保验证规则与表单字段正确关联，同时优化max规则为动态获取当前日期，避免页面长时间打开后验证截止日期失效：

// 替换为你的目标字段名，比如"selectedDate"
const schema = Yup.object().shape({
  selectedDate: Yup.date()
    .required(`${item.validation.required.message}`)
    // 用函数动态返回当前日期，每次验证都会重新计算
    .max(() => new Date(), "No Future Date, Please choose another date")
});

2. 确保Formik启用即时验证开关 #

Formik默认开启validateOnChange和validateOnBlur，但如果代码中手动关闭过，需重新开启：

<Formik
  initialValues={{ selectedDate: null }} // 对应你的字段初始值
  validationSchema={schema}
  validateOnChange={true} // 字段变更时立即验证
  validateOnBlur={true} // 字段失焦时立即验证
  onSubmit={(values) => { /* 你的提交逻辑 */ }}
>
  {/* 表单内容 */}
</Formik>

3. 原生日期输入框的绑定处理 #

如果使用原生<input type="date">，直接绑定Formik的handleChange和handleBlur即可：

{({ handleChange, handleBlur, values, errors, touched }) => (
  <div>
    <label>选择日期</label>
    <input
      type="date"
      name="selectedDate"
      // 格式化日期为input可识别的格式
      value={values.selectedDate ? values.selectedDate.toISOString().split('T')[0] : ''}
      onChange={handleChange}
      onBlur={handleBlur}
    />
    {/* 结合touched状态，避免页面加载时就显示错误 */}
    {errors.selectedDate && touched.selectedDate && (
      <span style={{ color: 'red' }}>{errors.selectedDate}</span>
    )}
  </div>
)}

4. 第三方日期组件（如react-datepicker）的处理 #

如果使用第三方日期组件，需要手动映射变更事件到Formik，并可主动触发字段验证：

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

{({ handleChange, handleBlur, validateField, values, errors, touched }) => (
  <div>
    <label>选择日期</label>
    <DatePicker
      selected={values.selectedDate}
      onChange={(date) => {
        // 手动触发Formik的字段变更逻辑
        handleChange({ target: { name: "selectedDate", value: date } });
        // 主动触发该字段的即时验证
        validateField("selectedDate");
      }}
      onBlur={handleBlur}
      dateFormat="yyyy-MM-dd"
    />
    {errors.selectedDate && touched.selectedDate && (
      <span style={{ color: 'red' }}>{errors.selectedDate}</span>
    )}
  </div>
)}

关键注意点 #

• 错误提示需结合touched状态展示，避免页面初始化时就弹出错误
• 第三方组件必须正确传递字段名相关的变更事件，否则Formik无法识别字段变化
• 动态更新Yup的max值，避免页面长时间停留后验证逻辑失效

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