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)
    }
});

The question does not make sense. By default, the plugin ignores all hidden fields. Setting `ignore: []` simply disables the `ignore` option. In other words, `ignore: []` allows hidden fields to be validated, instead of ignored. What does your question have to do with hidden fields? Where is your _rendered_ HTML markup? — Sparky, Feb 16 '14 at 17:08
@Sparky kendo and hidden fields - http://www.telerik.com/forums/mvc-unobtrusive-validation-doesn't-work — aw04, Feb 16 '14 at 17:18

score 8 · Accepted Answer · edited May 23 '17 at 12:14

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.

adding jquery validation to kendo ui elements

1 Answers1

Linked