ASP.Net MVC validation not working with Bootstrap Select Picker

Question

I've issue with ASP.NET MVC validation not working with Bootstrap Select Picker, If I remove the selectpicker class from dropdown list the validation working fine and if I added it the validation not working , Any help please

The MVC Code :

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

The Jquery Code With Valida-min.js

 $(".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);
            }
        }
    })

Thanks

please show us your code, otherwise I don't now how we're going to be able to help you! — jbutler483, Sep 29 '14 at 16:11
you shouldn't need to use Jquery for this in mvc. Have a look in your Controller and Model! :) — jbutler483, Sep 30 '14 at 08:06

score 3 · Accepted Answer · edited May 23 '17 at 11:53

I stumbled upon this question while searching for fix for same issue.

The problem arises from fact, that Bootstrap hides original select element and creates it's own elements to handle UI for dropdown list. In the meantime, jQuery validation by default ignores invisible fields.

I fixed this with workaround which combines changing validation ignore list and finding parent form. Final code snippet in my case looks like this

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

There still could be potential issues, but for my needs this solution works good enough.

score 0 · Answer 2 · answered Feb 22 '17 at 11:17

The problem is caused by the display:none property given from bootstrap select skin to the original select (jQuery validate ignores hidden fields). It could be avoided working only with CSS keeping back visible the original select but giving it some properties to avoid visibility

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

score -2 · Answer 3 · answered Feb 18 '17 at 17:10

I guess, editing of bootstrap-select.js may solve this issue permanently. I have tried something like this:

$(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();
        });

Its working fine to me.

ASP.Net MVC validation not working with Bootstrap Select Picker

3 Answers3