making unobtrusive validation work when using Select2 ASP.NET MVC

Question

Select boxes converted to Select2, do not automatically integrate with unobtrusive validation mechanism in ASP.NET MVC framework.
For example, on a form which contains a regular select box (marked as required in model definition), submitting the form while no options have been selected in the select box, will cause the border and background of the select box to take a reddish color, and by using @Html.ValidationMessageFor, error messages, if any, can be displayed beside the box. However if the select box is converted to a Select2 component, then none of the mentioned features work any more. Even the validation error message will not show up.
It seems that the reason for even the validation error message not showing, is because Select2 changes the display CSS property of the original select box to none (display:none), and I guess the unobtrusive validation script does not bother generating error messages for invisible fields.

Any ideas / solutions?

Rabbinical

Thank you for the correction of the tags buddy. As you can see, I'm an absolute novice with stackoverflow, but I'm learning. – Rabbinical

Answer 1

This issue isn't really specific to Select2, but rather to the jQuery unobtrusive validator.

You can turn on validation for hidden fields as highlighted in this answer.

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

As the comments noted, it didn't work inside an anonymous callback function within $(document).ready(). I had to put it at the top level.

Gelatinize

Answer 2

I've run into similar issues with the select2 plugin. I don't know exactly which features you're using specifically, but in my experience, when you set an element as a select2 in the document.ready event, the plugin will change some of the element's attributes on the fly (inspect one of the elements after your page has finished loading - oftentimes you'll see the id and class properties are different than what you're seeing when you view source).

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

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

Then, since you're talking about form submissions, I'd recommend you examine whether or not you're getting a full postback or submitting via AJAX (if you're using jQueryMobile, you're using AJAX unless you override it in the jquerymobile.js file or set a data-ajax="false" in your form attributes). You can just look at the value returned by Request.IsAjaxRequest() for this. Obviously if you're submitting via ajax, you won't hit the document.ready event and the select2 won't initialize properly and you'd need to figure out a way around that. Try refreshing the page after the submit and see if it renders the select2 component.

Then I'd suggest examining the elements and see if they're not behaving like you'd expect because you're actually trying to work with classes that the plugin has reassigned at runtime. You can either just adjust your logic, or you can dig into the select2 code itself and change the behavior - it's actually fairly well-documented what the code is doing, and if you hop on the Google group for select2, Igor is usually pretty quick to follow up with questions.

Mcdevitt

Thank you very much for your quick response. Well, I should've made it clear that the symptom I have described above is not specific to server-side validation, so it is not just when the form has actually been submitted (postback or AJAX), but it happens in client-side validation as well. I do expect for the validation not to work as expected when applying Select2, because it changes the DOM dynamically. However, I was wondering if anyone had already come up with a solution. – Rabbinical

I understand. I thought about that after I reread your post but wasn't quite sure. For what I was doing (which was more tied to event-handling than styling), I just inspected the dom elements and figured out what they were being set to and then validated against the new values. I imagine this would work for styling as well, even if it would be a bit more legwork. Additionally, you can control much of how the plugin interacts with the DOM by digging through the plugin code itself - he did a pretty good job of giving the attributes unique identifiers, making them easier to find in the js. – Mcdevitt

Answer 3

like this

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

Biometry

Answer 4

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

$(this).blur();

})

Reflective