Why won’t a custom jQuery Validation method run on an input element using KendoUI?

In our web application, forms are generated by ASP.NET MVC, which uses jQuery Validation and Unobtrusive Validation. I was recently working on a form we use in our own web application, and we planned to integrate on an external website via AJAX. There is a select menu in the form that allows the user to select from a list of items, and it has KendoUI’s MultiSelect plugin applied to it. The form worked just fine when used on our primary site, but when I used this form on an external site (making sure to include all necessary JavaScript), a custom validation method we add on page load to that one select menu absolutely would not run. Can you guess what caused this?

I wish I could have. I spent – are you ready for this? – two full work days figuring this out. I tried everything. I tried re-parsing the validation on the form in every way imaginable. I Googled and searched and wept. I set breakpoints and console logging in the custom validation method, but they were never hit, not even glanced at by jQuery Validation. I debugged the validation settings being applied to the form elements, and I could see the custom rule there, but it never got run.

Finally, I looked in a JavaScript file in our web application that defines some additional custom validation methods and noticed this seemingly insignificant piece of code at the bottom of the file:

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

Oh. My. Good. Golly.

It suddenly dawned on me that we had encountered a similar problem before! By default, jQuery Validation ignores hidden inputs. It was all making sense.

When the Kendo MultiSelect plugin is applied to the select menu, it hides the <select> element and generates its own elements. While debugging, I could see that the validation rules were being applied to the select menu, but it wouldn’t actually run them. It wouldn’t run because on the external website, jQuery Validation was ignoring that hidden <select> menu entirely.

After including the setDefaults call (seen above) on the external website, the validation immediately began working.

I sure hope this post saves someone else from wasted hours of fruitless troubleshooting!

Have you ever run into this problem or one like it? Leave a comment below!