【问题标题】:How to catch client side jQuery validation errors for Kendo grid?如何捕获 Kendo 网格的客户端 jQuery 验证错误?
【发布时间】:2018-02-23 07:13:20
【问题描述】:

注意:据我的理解是正确的替代标题可能是:

“如何通过客户端 javascript 访问 jQuery 验证器对象,Kendo 网格用于行内联编辑的内容?”

上下文

我可以使用数据源错误捕获(处理)服务器端验证错误并将它们显示在通知中。我想在类似的通知中显示所有客户端验证错误。

正如下面的代码禁止所示,它似乎是一个标准的 jQuery 验证。我仍然不知道如何将处理程序附加到现有网格。

问题

客户端验证错误似乎是没有触发了数据源错误事件。

如何编写一个处理程序来迭代客户端验证错误并以我的自定义方式显示它们?

其他信息

通过处理数据源错误事件来处理服务器端错误 但是,当“仅”客户端验证错误发生时,甚至不会触发。

这是导致客户端验证错误的字段:

这是该字段的相应 html,其中包含验证属性:

<input class="k-textbox form-control" 
   data-val="true" 
   data-val-length="First Name should be maximum 30 characters" 
   data-val-length-max="30" 
   data-val-regex="Enter at least 3 characters. Use only alphabets and ,.'- characters" 
   data-val-regex-pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{3,}" 
   data-val-required="The First Name field is required." 
   id="FirstName" 
   name="FirstName" 
   data-bind="value:FirstName">

【问题讨论】:

  • 所以假设我们都知道这可能是 ASP.NET 项目的一部分,并且您可能会或可能不会使用不显眼的验证插件?
  • 是的。但无论它是否是 asp,帖子中的 jquery-validate 标记以及带有 data-val 属性的 html 代码禁止都携带该问题与 jquery 验证相关的信息。但是,我很难在客户端获取验证器对象,因为剑道内联网格编辑将其掩盖得很深。因此,要么我们对 kendo 进行逆向工程以知道内联编辑的验证器在哪里,要么我们找到了其他访问验证器的方法。我更喜欢解决这个客户端,因为我在那里看到了更好的机会。
  • 我同意我们需要关注客户端。但是,我的评论很重要,因为您没有向我们展示任何客户端 JavaScript 或向我们展示如何构造和调用 .validate() 方法。立即获取?
  • 是的,我们都明白。 (没有客户端代码,全部由 Telerik .js 完成,无论它是直接从 javascript 驱动还是(所以它是 Kendo UI)或 Telerik ASP)

标签: javascript jquery jquery-validate kendo-grid


【解决方案1】:

我已经结束了下面的解决方案。 解决了主要问题,如何访问 Kendo 网格内部内联表单的内部 jquery 验证器对象。 进一步细化是可能的。

以下函数附加到 Kendo 网格的“编辑”事件。我尝试过使用网格的“save”或“saveChanges”事件,但不幸的是,如果内联表单中发生 jQuery 验证错误,则不会触发任何事件。

所以我使用验证器的验证事件本身,并在编辑事件发生时绑定验证处理程序。 (似乎是为内联表单动态创建的验证器,没有被重用。)

以下函数附加到剑道网格的“编辑”事件:

function (e) {
    var validatable = e.sender.editable.validatable;
    validatable.bind("validate", function (e) {
        var errors = e.sender.errors();
            for (var i = 0; i < errors.length; i++) {
                 // do whatever you want with errors[i]
            }
    });

【讨论】:

    猜你喜欢
    • 2018-09-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-11-08
    相关资源
    最近更新 更多