Validation using ASP.NET MVC + Kendo UI + jquery validate unobtrusive

I write one of my project in ASP.NET MVC with Kendo UI. I am using data annotations to emit client side validation rules. jquery.validate.unobtrusive.js picks them up and converts them into jquery validate rules. It works great for standard html inputs, but when inputs are wrapped with Kendo UI, input-validation-error class is assigned to wrong element. I was looking for solution to this problem, but didn't find really complete answer. Here is mine.

First we have to adjust jquery validate to highlight appropriate elements in DOM:

 
(function () {
    //This function checks if validated input is part of Kendo input and if it is, 
    //it returns related Kendo element. Otherwise it returns itself.
    var findKendoElement = function (element) {
        //Pickers and numerics are built differently by Kendo, so we have to check.
        var parent = (element.parent().hasClass('k-picker-wrap') || 
            element.parent().hasClass('k-numeric-wrap')) ? 
            element.parent().parent() : element.parent();

        if (parent.hasClass('k-widget')) {
            return parent.children().first();
        } else {
            return element;
        }
    };

    $.validator.setDefaults({
        ignore: function (index, e) {
            var element = $(e);
            var elementToHighlight = findKendoElement(element);
            return elementToHighlight.not(':hidden').length === 0;
        },
        highlight: function (e) {
            var element = $(e);
            var elementToHighlight = findKendoElement(element);
            elementToHighlight.addClass('input-validation-error');
        },
        unhighlight: function (e) {
            var element = $(e);
            var elementToHighlight = findKendoElement(element);
            elementToHighlight.removeClass('input-validation-error');
        }
    });
})();
 

Then we have to (unfortunately) modify jquery.validate.js a bit to handle situation properly. We are modyfing defaultShowErrors function. We have to do it, so jquery.validate doesn't hide our inputs. We are changing one of the last lines:

this.toHide = this.toHide.not(this.toShow).filter(function (index, item) {
    return !$(item).parent().hasClass("k-widget");
});

And voila, it works :) Please be aware, that findKendoElement function may require some adjustments, because I am not using all types of inputs.