ASP.Net MVC 验证不适用于 Bootstrap Select Picker答案

【问题标题】：ASP.Net MVC validation not working with Bootstrap Select PickerASP.Net MVC 验证不适用于 Bootstrap Select Picker
【发布时间】：2014-09-29 16:08:45
【问题描述】：

我的问题是 ASP.NET MVC 验证无法与 Bootstrap Select Picker 一起使用，如果我从下拉列表中删除 selectpicker 类，验证工作正常，如果我添加它验证不工作，请提供任何帮助

MVC 代码：

 @Html.DropDownListFor(m => m.SelectedLocationID, Model.lstOfLocations, "Select Delivery Location", new { @class = " selectpicker", @placeholder = "" })
            @Html.ValidationMessageFor(m => m.SelectedLocationID)

带有 Valida-min.js 的 Jquery 代码

 $(".SearchForm").validate({
        ignore: ':not(select:hidden, input:visible, textarea:visible)',
        rules: {
            SelectedLocationID: {
                required: true
            }
        },
        errorPlacement: function (error, element) {
            if ($(element).is('Select Delivery Location')) {
                element.next().after(error);
            } else {
                error.insertAfter(element);
            }
        }
    })

谢谢

【问题讨论】：

请向我们展示您的代码，否则我现在不知道我们将如何为您提供帮助！
好吧，我添加了我的代码，你能帮我吗？谢谢
你也可以发布你的视图模型吗？
你不应该在 mvc 中为此使用 Jquery。看看你的控制器和模型！ :)

标签： asp.net-mvc twitter-bootstrap

【解决方案1】：

我在寻找相同问题的修复程序时偶然发现了这个问题。

问题源于事实，Bootstrap 隐藏了原始选择元素并创建了自己的元素来处理下拉列表的 UI。同时，jQuery 验证默认忽略不可见字段。

我通过结合changing validation ignore list 和finding parent form 的解决方法解决了这个问题。我的最终代码 sn-p 看起来像这样

        if ($(".selectpicker")[0]) {
            $(".selectpicker").selectpicker();
            $('.selectpicker').parents('form:first').validate().settings.ignore = ':not(select:hidden, input:visible, textarea:visible)';
        }

仍然可能存在潜在问题，但对于我的需要，这个解决方案已经足够了。

【讨论】：

【解决方案2】：

问题是由从引导选择皮肤给原始选择的 display:none 属性引起的（jQuery 验证忽略隐藏字段）。可以避免仅使用 CSS 保持原始选择可见但为其提供一些属性以避免可见性

select.bs-select-hidden, select.selectpicker 
{
    display:block !important; opacity:0; height:1px; width:1px;
}

【讨论】：

【解决方案3】：

我猜，编辑 bootstrap-select.js 可能会永久解决这个问题。我尝试过这样的事情：

$(document)
        .data('keycount', 0)
        .on('keydown.bs.select', '.bootstrap-select [data-toggle=dropdown], .bootstrap-select [role="listbox"], .bs-searchbox input', Selectpicker.prototype.keydown)
        .on('focusin.modal', '.bootstrap-select [data-toggle=dropdown], .bootstrap-select [role="listbox"], .bs-searchbox input', function (e) {
            //Validation handler: Kartik
            var $thisParent = $(this).parent(".bootstrap-select");
            if ($thisParent.find("ul").find("li:first").hasClass("selected")) {
                if ($thisParent.next("span").length > 0)
                    $thisParent.next("span").css("display", "block");
            }
            else {
                if ($thisParent.next("span").length > 0)
                    $thisParent.next("span").css("display", "none");
            }
            e.stopPropagation();
        });

它对我来说很好。

【讨论】：