将 jquery 验证添加到 kendo ui 元素

Posted

技术标签:

【中文标题】将 jquery 验证添加到 kendo ui 元素【英文标题】:adding jquery validation to kendo ui elements 【发布时间】:2014-03-15 20:25:35 【问题描述】:

我查看了很多关于此的帖子,并且在我添加以下内容时它确实可以验证我的字段。

$.validator.setDefaults(
    ignore: []
);

我仍然缺少的部分是添加input-validation-error 类来通知用户。它适用于我的其他输入元素(非剑道)。我也尝试在 $.validator.setDefaults 中手动添加该类,但似乎没有任何效果。

在某处是否有示例或有人让它工作?

我不确定我这样做是否正确,但这是我尝试手动添加的内容。

$.validator.setDefaults(
    ignore: [],
    errorClass: "input-validation-error",
    errorElement: "input",
    highlight: function (element, errorClass) 
        $(element).addClass(errorClass)
    ,
    unhighlight: function (element, errorClass) 
        $(element).removeClass(errorClass)
    
);

【问题讨论】:

这个问题没有意义。默认情况下,插件会忽略所有隐藏字段。设置ignore: [] 只会禁用ignore 选项。换句话说,ignore: [] 允许验证隐藏字段,而不是忽略。您的问题与隐藏字段有什么关系?您的渲染 html 标记在哪里? @Sparky 剑道和隐藏字段 - telerik.com/forums/mvc-unobtrusive-validation-doesn't-work 【参考方案1】:

我找到了基于this post 的解决方案。基本上你需要做的是寻找 input 被包裹的父元素。像这样的东西:

$.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')
        
    
);

我建议任何人在删除这个特定的兔子洞之前访问我上面链接的帖子,因为它引入了另一个问题,只是为了了解你正在进入的内容。例外的答案确实比那里提出的问题更相关。

【讨论】:

以上是关于将 jquery 验证添加到 kendo ui 元素的主要内容,如果未能解决你的问题,请参考以下文章

Kendo UI and Vue.js

如何将事件添加到 Kendo UI 调度程序?

Kendo UI 将 DropDownList 添加到 Grid (MVC)

Kendo UI:无法将 footerTemplate 添加到网格

Kendo UI javascript:远程绑定表单

Kendo UI 下拉过滤器不适用于 jquery