MVC5同一页面Date与DateTime字段验证错误排查求助

问题场景 #

模型定义了两个DateTime类型字段：

[Display(Name = "Tanggal")]
[Required(ErrorMessage = "Tanggal harus diisi.")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime Date { get; set; }

[Display(Name = "Waktu Penumpukan")]
[DataType(DataType.DateTime)]
[DisplayFormat(DataFormatString = "{0:DD/MM/YYYY HH:mm:ss}", ApplyFormatInEditMode = true)]
public DateTime StackingDate { get; set; }

视图配置：

• Date字段使用HTML5原生日期选择器，通过EditorFor生成
• StackingDate字段使用Bootstrap DateTimePicker，通过TextBoxFor结合组件初始化实现

为适配DateTimePicker的格式，自定义了jQuery验证的date方法：

$.validator.methods.date = function (value, element) {
    return this.optional(element) || moment(value, "DD/MM/YYYY HH:mm:ss", true).isValid();
}

此时StackingDate验证正常，但Date字段触发错误提示："The field Tanggal must be a date."；移除自定义验证方法后，Date验证恢复正常，但StackingDate验证失败。

解决方案 #

问题核心是自定义验证方法仅针对DD/MM/YYYY HH:mm:ss格式校验，而原生日期选择器返回的是yyyy-MM-dd格式，导致验证不通过。只需修改验证方法，根据输入框类型区分校验逻辑：

方案一：通过输入框类型区分 #

$.validator.methods.date = function (value, element) {
    // 对HTML5原生date类型输入框，用yyyy-MM-dd格式校验
    if (element.type === 'date') {
        return this.optional(element) || moment(value, "YYYY-MM-DD", true).isValid();
    }
    // 对Bootstrap DateTimePicker的输入框，用指定日期时间格式校验
    return this.optional(element) || moment(value, "DD/MM/YYYY HH:mm:ss", true).isValid();
}

方案二：通过专属类标识区分（备选） #

如果原生日期选择器的类型判断不生效，可给Date字段的输入框添加专属类：

@Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control native-date-picker" } })

再修改验证方法：

$.validator.methods.date = function (value, element) {
    if ($(element).hasClass('native-date-picker')) {
        return this.optional(element) || moment(value, "YYYY-MM-DD", true).isValid();
    }
    return this.optional(element) || moment(value, "DD/MM/YYYY HH:mm:ss", true).isValid();
}

通过以上修改，两种字段会分别使用对应格式完成验证，彻底解决冲突问题。

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