Kendo UI

Previously we discussed Kendo UI and the problems with jQuery validation relating to the Kendo UI Editor. Well, I discovered another control that exhibits the same problems, the Kendo UI NumericTextBox. I didn’t think that this control would have the same problem as the Kendo UI Editor, after all, it’s a text box. Alas, I was wrong. It is quite annoying when you find your form submit (at least the validation happens on the server). What’s going on?!?

Problem

If you didn’t read the earlier post, the problem is that Kendo UI may hide your actual input, “overlaying” its own, depending on the control. Your input element has the validation attributes needed for jQuery Validation, but because it’s hidden by Kendo, the client-side validation doesn’t fire. You can read more about this in the jQuery Validation 1.9.0 release notes, where it started ignoring hidden inputs.

Solution

If you read my earlier post, or you figured this out on your own, you are probably aware some of workarounds. One approach is to have jQuery include all the hidden inputs on a page (a.k.a “the greedy approach”). In this case, you won’t fall victim to this issue. Here’s that approach again:

$.validator.setDefaults({ ignore: []});

I’m not that big of a fan of greedy approaches for things like this; they can cause unexpected bugs to occur. Instead let’s target the Kendo UI Numeric Textbox control directly (well, the input element inside of it).

$("form").data("validator").settings.ignore = ":hidden:not(.k-numerictextbox input)"

We should be able to build on the ignore string from my last post on the topic, including both the Kendo UI Editor and the Numeric Textbox controls:

$("form").data("validator").settings.ignore = ":hidden:not(.kendo-editor textarea, .k-numerictextbox input)"

If you recall, my Kendo UI Editor field happens to be wrapped in an element with a class of kendo-editor, though you can use any option that works for you.

I wonder what other controls have the same problem. Any guesses, thoughts, or comments?