MUI V5 DateTimePicker无法正常显示Yup预期校验错误消息问题

问题根因 #

空值触发格式错误而非必填错误的核心原因有两个：

• 空值传入时你的parseDateString转换返回了Invalid Date而非null，Yup会优先判定为类型不匹配，触发typeError而非后续的required校验
• 没有正确将React Hook Form的错误状态传递给MUI组件，导致错误样式不生效

解决步骤 #

1. 调整校验规则与转换逻辑 #

修改transform函数，空输入时直接返回null，避免生成Invalid Date触发类型错误，同时调整校验规则顺序：

const schema = yup.object().shape({
  name: yup
    .string()
    .required("请输入姓名，该字段不可为空。"),
  date: yup
    .date()
    .transform((value, originalValue) => {
      // 空输入直接返回null，走必填校验逻辑
      if (originalValue == null || originalValue === '') return null
      // 保留原有日期解析逻辑，解析失败返回Invalid Date即可
      return parseDateString(originalValue)
    })
    .nullable()
    .typeError("日期格式无效，请按照 mm/dd/yyyy hh:mm am/pm 格式输入")
    .required("该字段不可为空")
});

2. 适配MUI组件错误状态 #

通过Controller包裹DateTimePicker时，需要主动将错误状态传递给MUI的TextField组件，才能触发红色错误样式：

import { Controller, useForm } from 'react-hook-form';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { TextField } from '@mui/material';

// 表单内部使用示例
<Controller
  name="date"
  control={control}
  render={({ field, fieldState: { error } }) => (
    <DateTimePicker
      {...field}
      label="选择日期"
      renderInput={(params) => (
        <TextField
          {...params}
          // 控制错误红色样式
          error={!!error}
          // 展示错误提示文本
          helperText={error?.message}
        />
      )}
    />
  )}
/>

3. 配置失焦触发校验（可选） #

如果需要字段失焦时就触发校验、显示错误，初始化useForm时添加mode配置：

const { control, handleSubmit } = useForm({
  resolver: yupResolver(schema),
  // 失焦时触发校验，可选值还有onChange、all、onSubmit等，按需选择
  mode: 'onBlur'
});

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