CODEWITHSUNDEEP
jqueryuser-interface
Jyo
Jyo

Reputation: 197

JQuery UI Validation plugin does not work with Kendo UI controls

I have implemented JQuery UI Validation plugin in my MVC4 project in all html controls which works absolutely fine. Now I want to use this pugin to some of Kendo UI controls like kendo datepicker or kendo autocomplete etc.

JQuery UI Validation works fine in my below code as per this URL http://posabsolute.github.io/jQuery-Validation-Engine/

@Html.TextBoxFor(Function(x) Model.EstimatedDt, New With {.id = "kdatepicker",.class = "validate[required]"})

Now I replaced with kendo UI datepicker

@(Html.Kendo().DatePicker().Name("kdatepicker").HtmlAttributes(new with{.Class = "validate[required]"}))

But this does not work. This gives the error message TWICE and even after I enter some value, the control takes of one tooltip error message and still displays one error tooltip.

I checked the view source and it creates like this -

<input class="validate[required]" id="kdatepicker" name="kdatepicker" type="date" /><script>
    jQuery(function(){jQuery("#kdatepicker").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
</script>

Please help me where I am missing. Does the Jquery UI ValidationEngine not work with Kendo UI controls ?

Thanks Jyo

Upvotes: 0

Views: 1251

Answers (2)

user3405956
user3405956

Reputation: 1

A little late, but here is the code that I'm using to make jquery.validate.js compatible with KendoUI

/* Include this in a file or script tag after jquery.validate.js */

(function ($) {
    var _highlight = $.validator.defaults.highlight;
    var _unhighlight = $.validator.defaults.unhighlight;
    $.extend($.validator.defaults, {
        ignore: [],
        highlight: function (element, errorClass, validClass) {
            var $element = $(element);
            var role = $element.data('role');

            if (role === 'combobox') {
                $element.data('kendoComboBox').input.addClass(errorClass).removeClass(validClass);
            }
            else if (role === 'editor') {
                $element.data('kendoEditor').wrapper.find('iframe').addClass(errorClass).removeClass(validClass);
            }
            else if (role === 'multiselect') {
                $element.data('kendoMultiSelect')._innerWrapper.addClass(errorClass).removeClass(validClass);
            }
            else if (role === 'numerictextbox') {
                $element.data('kendoNumericTextBox')._text.addClass(errorClass).removeClass(validClass);
            }
            else {
                _highlight(element, errorClass, validClass);
            }
        },
        unhighlight: function (element, errorClass, validClass) {
            var $element = $(element);
            var role = $element.data('role');

            if (role === 'combobox') {
                $element.data('kendoComboBox').input.addClass(validClass).removeClass(errorClass);
            }
                else if (role === 'editor') {
                    $element.data('kendoEditor').wrapper.find('iframe').addClass(validClass).removeClass(errorClass);
                }
            else if (role === 'multiselect') {
                $element.data('kendoMultiSelect')._innerWrapper.addClass(validClass).removeClass(errorClass);
            }
            else if (role === 'numerictextbox') {
                $element.data('kendoNumericTextBox')._text.addClass(validClass).removeClass(errorClass);
            } else {
                _unhighlight(element, errorClass, validClass);
            }
        }
    });

}(jQuery));

Upvotes: 0

Jyo
Jyo

Reputation: 197

Found the answer - Instead of adding the validate class inline we need to add it separately using jquery functions.

Previous

@(Html.Kendo().DatePicker().Name("kdatepicker").HtmlAttributes(new with{.Class = "validate[required]"}))

The solution

@(Html.Kendo().DatePicker().Name("kdatepicker"))

$(function () {
$("#kdatepicker").addClass("validate[required]");
}

The reason is if we add it inline it adds to control and container both which is twice.

Hope this helps somebody.. Happy Coding :)

Upvotes: 1

Related Questions