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
– jbutler483, Commented Sep 29, 2014 at 16:11
you shouldn't need to use Jquery for this in mvc. Have a look in your Controller and Model! :) — jbutler483
– jbutler483, Commented Sep 30, 2014 at 8:06

Community · Accepted Answer · 2017-05-23 11:53:19Z

3

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.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Oct 1, 2014 at 10:15

PiRX

3,5951 gold badge22 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boston2058 · Accepted Answer · 2017-02-22 11:17:23Z

0

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;
}

answered Feb 22, 2017 at 11:17

Boston2058

1

Comments

Kartik Bhave · Accepted Answer · 2017-02-18 17:10:59Z

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.

Collectives™ on Stack Overflow

ASP.Net MVC validation not working with Bootstrap Select Picker

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related