ASP.NET Core MVC下拉选单还原未选中项时必填验证消息不显示问题求助

这个问题我之前也碰到过，核心原因是枚举是值类型——默认情况下，即便用户选择了下拉选单的“未选中”选项，模型绑定后属性会被设为枚举的默认值（通常是0），而[Required]注解对于值类型来说，默认值会被视为“有效值”，这就导致了和文本框不一致的验证行为（文本框清空后提交的是空字符串，会触发[Required]）。

不用急着写JavaScript，有几个简洁的服务端修复方案：

方案1：使用可空枚举（最推荐） #

把你的枚举属性改成可空类型，这样当用户选择下拉选单的“未选中”选项时，属性值会被设为null，正好触发[Required]验证：

// 原来的非可空枚举属性
// public MyEnum Status { get; set; }

// 修改后的可空枚举属性
[Required(ErrorMessage = "请选择状态")]
public MyEnum? Status { get; set; }

同时确保下拉选单的第一个选项是空白值：

<select asp-for="Status" asp-items="Html.GetEnumSelectList<MyEnum>()">
    <option value="">请选择</option>
</select>
<span asp-validation-for="Status" class="text-danger"></span>

这样用户切回“未选中”选项提交时，[Required]会正常抛出验证消息，和文本框的行为完全一致。

方案2：给枚举添加“未选择”成员+范围验证 #

如果不想用可空枚举，可以在枚举里定义一个代表“未选择”的成员（值设为0），然后搭配[Range]验证排除这个默认值：

public enum MyEnum
{
    [Display(Name = "请选择")]
    None = 0,
    Active = 1,
    Inactive = 2
}

// 模型属性
[Required(ErrorMessage = "请选择状态")]
[Range(1, int.MaxValue, ErrorMessage = "请选择有效的状态")]
public MyEnum Status { get; set; }

当用户选择“None”选项提交时，[Range]验证会触发，提示用户必须选择有效选项，同样能达到一致的验证效果。

万不得已才用JavaScript #

如果上面两种方案都不符合你的需求，再考虑用JS手动触发验证。比如监听下拉选单的change事件，当选中空白选项时，手动标记字段为无效并显示错误消息：

document.getElementById('Status').addEventListener('change', function() {
    const selectElement = this;
    const validationMsgEl = document.querySelector('[data-valmsg-for="Status"]');
    
    if (selectElement.value === '') {
        // 标记为无效状态
        selectElement.classList.add('input-validation-error');
        validationMsgEl.textContent = '请选择状态';
        validationMsgEl.classList.add('field-validation-error');
        validationMsgEl.classList.remove('field-validation-valid');
    } else {
        // 清除错误状态
        selectElement.classList.remove('input-validation-error');
        validationMsgEl.textContent = '';
        validationMsgEl.classList.remove('field-validation-error');
        validationMsgEl.classList.add('field-validation-valid');
    }
});

不过这种方法需要额外维护JS代码，远不如服务端方案简洁省心。

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