Formik ValidationSchema搭配MUI DatePicker必填校验失效问题

核心问题 #

你的代码里有两个致命错误导致校验失效：

1. 字段名不统一：ValidationSchema里定义的是dateFrom/dateTo，但组件和Formik操作的是date_from，Yup的校验规则根本没绑定到正确字段上，自然不会生效。
2. Yup规则顺序错误：required()和nullable()的顺序搞反，导致必填规则被覆盖，无法触发预期的提示。

修复步骤 #

1. 统一所有字段名

确保initialValues、ValidationSchema、Formik的字段引用（values/touched/errors）、组件的name属性完全一致，比如都用date_from和date_to。

2. 调整Yup规则顺序

把nullable()放在required()前面，这样当用户清空日期（值变为null）时，required()会触发必填提示，而不是被nullable()允许通过。

修复后的完整代码 #

const formik = useFormik({
    initialValues: {
        market: null,
        date_from: null,
        date_to: null
    },

    validationSchema: yup.object({
        market: yup
            .object()
            .nullable()
            .required("请填写此字段"),
        date_from: yup
            .date()
            .nullable()
            .required("开始日期为必填项"),
        date_to: yup
            .date()
            .nullable()
            .required("结束日期为必填项"),
    }),
    onSubmit: async (values, helpers) => {
        // 你的提交逻辑
    }
})

<DatePicker
    onChange={value => formik.setFieldValue("date_from", value, true)}
    inputFormat="dd/MM/yyyy"
    label="交易日期"
    value={formik.values.date_from}
    renderInput={(inputProps) => (
        <TextField
            error={Boolean(formik.touched.date_from && formik.errors.date_from)}
            helperText={formik.touched.date_from && formik.errors.date_from}
            name="date_from"
            {...inputProps}
        />
    )}
/>

额外提醒 #

• 提交表单时Formik会自动触发全字段校验，若需要实时校验，setFieldValue的第三个参数设为true即可（你已配置）。
• 如果不需要允许日期为null，可直接去掉nullable()，此时用户清空日期时，Yup的date()规则会提示“无效日期”，结合required()同样能实现必填效果。

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