0

我已经在我的 MVC4 项目中的所有 html 控件中实现了 JQuery UI 验证插件，它工作得非常好。现在我想将此 pugin 用于一些 Kendo UI 控件，例如 kendo datepicker 或 kendo autocomplete 等。

根据此 URL http://posabsolute.github.io/jQuery-Validation-Engine/，JQuery UI 验证在我的以下代码中工作正常

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

现在我用剑道 UI 日期选择器替换

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

但这不起作用。这给出了错误消息两次，即使在我输入了一些值之后，控件也会接收一个工具提示错误消息，并且仍然显示一个错误工具提示。

我检查了视图源，它像这样创建 -

<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>

请在我失踪的地方帮助我。Jquery UI ValidationEngine 不能与 Kendo UI 控件一起使用吗？

谢谢乔

4

2 回答 2

1

找到了答案 - 我们需要使用 jquery 函数单独添加它，而不是添加内联验证类。

以前的

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

解决方案

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

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

原因是如果我们内联添加它，它会添加到控件和容器中，这都是两倍。

希望这对某人有所帮助..快乐编码:)

于 2013-07-15T15:04:41.200 回答
0

有点晚了，但这是我用来使 jquery.validate.js 与 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));
于 2014-03-11T11:57:05.677 回答