Doing unobtrusive validation work when using Select2 ASP.NET MVC

Question

Select cells converted to Select2, do not automatically integrate with an unobtrusive check engine in ASP.NET MVC.
For example, in a form that contains a regular selection flag (marked as required in the model definition), submitting the form when no parameters are selected in the selection field will cause the border and background of the selection field to have a reddish color, and using @Html .ValidationMessageFor, error messages, if any, may appear next to the field. However, if the selection field is converted to the Select2 component, then none of the mentioned functions works. Even the verification error message does not appear.
It seems that the reason even for the validation error message is not displayed, because Select2 changes the CSS property of the display of the original selection field to none (display: none), and I assume that the unobtrusive script check does not bother creating error messages for invisible fields.

Any ideas / solutions?

Answer 1

This issue is not very specific to Select2, but rather to the unobtrusive jQuery validator.

You can enable hidden field checking as highlighted in this.

$.validator.setDefaults({ ignore: '' }); 

As noted in the comments, it did not work inside the anonymous callback function in $(document).ready() . I had to put it on the upper level.

Answer 2

I am having similar problems with select2 plugin. I don’t know exactly what functions you use specially, but in my experience, when you set the element as select2 in the document.ready event, the plugin will change some of the element’s attributes on the fly (check one of the elements after the page has finished loading - often you see that the id and class properties are different from what you see when viewing the source).

It's hard to offer more without seeing the code, but here are a few ideas to help you get started:

First of all, make sure you have a link to your select2.css stylesheet in the header.

Then, since you are talking about form submissions, I would advise you to check if you get a complete response or submit via AJAX (if you use jQueryMobile, you use AJAX if you do not override this in jquerymobile.js file or set data-ajax="false" in your form attributes). You can just look at the value returned by Request.IsAjaxRequest() for this. Obviously, if you send via ajax, you will not get into the document.ready event, and select2 will not initialize correctly, and you will need to figure out how to do this. Try refreshing the page after submitting and see if it displays the select2 component.

Then I suggest that you examine the elements and see if they behave as you expected, because you are actually trying to work with classes that the plugin has reassigned at runtime. You can either simply customize your logic, or you can delve into the select2 code itself and change the behavior - in fact, it is well documented what the code does, and if you jump in the Google group for select2, Igor is usually pretty quick to answer questions .

Answer 3

, like this

 $('select').on('select2:select', function (evt){ $(this).blur(); }); 

Answer 4

$ ('body'). on ('change', 'select.m-select2', function () {

 $(this).blur(); 

})