adding jquery validation to kendo ui elements

Question

I've looked at many posts on this and have it working to the extent that it does validate my fields when I add the following.

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

The part I'm still missing is adding the input-validation-error class to notify the user. It is working fine for my other input elements (non-kendo). I've tried adding the class manually in $.validator.setDefaults as well but nothing seems to be working.

Is there an example out there somewhere or has anyone gotten it to work?

I'm not certain I'm doing this right but here's what I've tried to add it manually.

$.validator.setDefaults({
    ignore: [],
    errorClass: "input-validation-error",
    errorElement: "input",
    highlight: function (element, errorClass) {
        $(element).addClass(errorClass)
    },
    unhighlight: function (element, errorClass) {
        $(element).removeClass(errorClass)
    }
});

Answer 1

I found a solution to this based on this post. Basically what you need to do is look for the parent element that the input is wrapped in. Something like this:

$.validator.setDefaults({
    ignore: [],
    highlight: function (element, errorClass) {
        element = $(element);
        if (element.parent().hasClass("k-widget")) {
            element.parent().addClass('input-validation-error');
        } else {
            element.addClass('input-validation-error')
        }
    },
    unhighlight: function (element, errorClass) {
        element = $(element);
        if (element.parent().hasClass("k-widget")) {
            element.parent().removeClass('input-validation-error');
        } else {
            element.removeClass('input-validation-error')
        }
    }
});

I would advise anyone though to visit the post I've linked to above before taking off down this particular rabbit hole as it introduces another issue, just to be aware of what you're getting into. The excepted answer is really more relevant to this question than the one being asked there.