JQuery UI验证插件不能与Kendo UI控件一起工作

Question

我已经在我的MVC4项目中实现了JQuery UI验证插件，它在所有的html控件中工作得非常好。现在，我想用这个普金的一些剑道的UI控件像剑道日期选择器或自动完成剑道等

JQuery用户界面验证工作正常，在我下面的代码 按照这个网址http://posabsolute.github.io/jQuery-Validation-Engine/

@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]"})) 

但这不起作用。这会给出错误消息TWICE，即使在输入某个值后，控件也会收到一条工具提示错误消息，并仍显示一个错误工具提示。

我查查看源代码，它创造这样的 -

<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控件？

感谢 Jyo

Answer 1

找到了答案 - 而不是添加校验类中内嵌的，我们需要分别添加它使用jQuery的功能。

上一页

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

解决方案

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

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

的原因是，如果我们加上它内联将其添加到控制和容器两者的两倍。

希望这有助于有人.. 编码快乐:)

Answer 2

有点晚了，但这里是我使用，使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));