Razor页面中Material Design Bootstrap转换下拉框后如何手动触发Required验证

这个问题我之前也碰到过——MBD的Select组件会把原生<select>替换成模拟的<input>，直接切断了ASP.NET客户端验证和可视化组件的关联。下面给你几个可行的解决思路，亲测有效：

核心原理先理清楚 #

MBD的Select组件并没有删除原生<select>，只是把它设为display: none隐藏起来了。ASP.NET的客户端验证（基于jQuery Validate）还是依赖这个隐藏的原生元素，所以我们要做的就是把MBD组件的交互和原生select的验证逻辑绑定起来，同时让错误信息正确显示。

方法1：手动触发验证并同步错误状态 #

这是最直接的方案，利用jQuery Validate的API手动验证字段，再把错误状态同步到MBD的input上：

首先，在你的cshtml页面底部添加这段脚本：

$(document).ready(function() {
    // 监听表单提交事件，手动验证SelectedItem字段
    $('form').on('submit', function(e) {
        const formValidator = $(this).validate();
        const isFieldValid = formValidator.element('#SelectedItem');

        if (!isFieldValid) {
            e.preventDefault(); // 阻止表单提交
            // 给MBD的模拟input添加错误样式（MBD用is-invalid标记错误状态）
            $('.select-input').addClass('is-invalid');
            // 强制显示验证错误信息
            $('#SelectedItem-error').show();
        } else {
            // 验证通过时清除错误样式和提示
            $('.select-input').removeClass('is-invalid');
            $('#SelectedItem-error').hide();
        }
    });

    // 监听MBD下拉框的选择事件，同步值到原生select并清除错误状态
    $('.select').on('change.mdb.select', function() {
        const selectedValue = $(this).val();
        // 更新隐藏的原生select的值，确保模型绑定能拿到正确数据
        $('#SelectedItem').val(selectedValue);
        // 触发验证清除错误状态
        $('#SelectedItem').valid();
        $('.select-input').removeClass('is-invalid');
        $('#SelectedItem-error').hide();
    });
});

注意：#SelectedItem-error是ASP.NET自动为ValidationMessageFor生成的元素ID，格式是{字段名}-error，你可以在浏览器开发者工具里确认这个ID是否正确。

方法2：修改MBD初始化配置，关联原生验证 #

你可以在初始化MBD Select时，把原生select的验证属性同步到模拟input上，同时绑定选择事件更新原生值：

$(document).ready(function() {
    $('.select').select({
        // 初始化时同步原生select的required属性到模拟input
        onInit: function() {
            const nativeSelect = this.$element;
            if (nativeSelect.attr('required')) {
                this.$input.attr('required', true);
            }
        },
        // 选择变化时同步值到原生select，并触发验证
        onChange: function(selectedItems) {
            const selectedVal = selectedItems[0]?.value || '';
            this.$element.val(selectedVal);
            this.$element.valid();
        }
    });

    // 监听原生验证的invalid事件，显示错误信息
    $('form').on('invalid', '#SelectedItem', function(e) {
        e.preventDefault();
        $('.select-input').addClass('is-invalid');
        $('#SelectedItem-error').text($(this).attr('data-val-required'));
        $('#SelectedItem-error').show();
    });
});

方法3：配合MBD的验证样式优化显示 #

把ValidationMessageFor的容器改成MBD的错误提示样式，让错误信息更贴合MBD的UI风格：

@Html.DropDownListFor(model => model.SelectedItem, model.Items, new { @class = "select", })
<!-- 加上MBD的invalid-feedback类，配合is-invalid显示错误 -->
<div class="invalid-feedback"> @Html.ValidationMessageFor(model => model.SelectedItem) </div>

最后别忘了服务器端验证兜底 #

客户端验证可以被绕过，所以服务器端的ModelState检查一定要保留：

public IActionResult OnPost()
{
    if (!ModelState.IsValid)
    {
        // 回传页面时重新加载下拉选项数据
        Items = GetYourSelectItems(); // 替换成你获取下拉项的方法
        return Page();
    }

    // 处理表单提交逻辑
    return RedirectToPage("/Success");
}

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