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
– Sparky, Commented Feb 16, 2014 at 17:08
@Sparky kendo and hidden fields - telerik.com/forums/mvc-unobtrusive-validation-doesn't-work — aw04
– aw04, Commented Feb 16, 2014 at 17:18

Community · Accepted Answer · 2017-05-23 12:14:50Z

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.

Collectives™ on Stack Overflow

adding jquery validation to kendo ui elements

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related