Kendo 验证器不处理文本更改

Question

我正在为我的项目使用 kendo 控件。我在客户端使用 jquery 验证来验证我的控件，但由于 jquery 验证不适用于 kendo 控件，所以我使用 kendo 验证器来验证控件。

我正在对 MVC 5 项目使用数据注释验证。这是示例 dojo.

它工作完美，但验证只出现在焦点外或模糊事件上。有没有什么方法可以像 jquery validation?

那样验证对控件值更改的控制

更新：

这是帮助我解决这个问题的完整解决方案：

if ($.validator !== undefined) {
        $.validator.setDefaults({
            ignore: [],
            highlight: function (element, errorClass) {
                element = $(element);
                var highLightElement;
                if (element.parent().hasClass("k-picker-wrap") ||
                    element.parent().hasClass("k-numeric-wrap")) {
                    highLightElement = element.parent().parent();
                }
                else if (element.parent().hasClass("k-widget")) {
                    highLightElement = element.parent();
                } else if (element.parent().children('.k-upload-empty').length > 0) {
                    highLightElement = $(element.parent().children('.k-upload-empty')[0]);
                } else {
                    highLightElement = element;
                }
                highLightElement.addClass('input-validation-error');
            },
            unhighlight: function (element, errorClass) {
                element = $(element);
                var highLightElement;
                if (element.parent().hasClass("k-picker-wrap")
                    || element.parent().hasClass("k-numeric-wrap")) {
                    highLightElement = element.parent().parent();
                }
                else if (element.parent().hasClass("k-widget")) {
                    highLightElement = element.parent();
                } else {
                    highLightElement = element;
                }
                highLightElement.removeClass('input-validation-error');
            }
        });
    }

Answer 1

您有 2 种方法可以实现您的目标：

使用 jQuery 非侵入式验证 KendoUI

背景

如您所知，Kendo UI 编辑器创建的元素与 HTML 表单元素不同。其他 JavaScript 编辑以类似的方式工作。使用 CSS (display: none;) 隐藏了实际的 HTML，这就是问题所在。 默认情况下jQuery验证忽略隐藏的输入字段。表单元素上有 validation data-* 个属性，但由于它是隐藏的，当不显眼的验证触发时，编辑器将被忽略。

解决方案

您有两种方法可以解决这个问题，并且可以完美地使用这两种技术。阅读 Making the Kendo UI Editor Work With jQuery Validations and if you have any problem for implementing, please read Kendo UI NumericTextBox With jQuery Validation 作为 NumericTextBox

的示例

然后，在验证的情况下，您可能无法分配正确的 CSS class。您可以阅读 adding jquery validation to kendo ui elements.

只需使用 KendoUI 验证器

您应该为验证目的实施所需的事件。在这里你需要 onChange 事件来像 jQuery Unobtrusive Validation 一样工作。使用下面的代码，因为它描述了要做什么：

$(document).ready(function () {
    function widgetChange() {
        //place validation logic
    };

    $("#dropdownlist").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: data,
        change: widgetChange
    });
})

您可能想要同时使用它们！所以看看.Net Mvc 3 Trigger (other than submit button) Unobtrusive Validation

更新

一个dojo for implementing with last solution which added a pattern="\d+" to search input with a validation message. The validation is called by filtering event for the same input. Note that you should use desired event based on UI element, here we used filtering for autocomplete instead of using change for DropDownList.

我最近发现了一个新的实现，看起来很适合尝试和测试。可在 aspnet-mvc getting-started validation

Kendo 验证器不处理文本更改

Kendo validator not working on text change

asp.net-mvc

kendo-ui

telerik

kendo-validator

使用 jQuery 非侵入式验证 KendoUI

背景

解决方案

只需使用 KendoUI 验证器

更新