2

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

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

它工作得很好，但验证只出现在聚焦或模糊事件上。有什么方法可以验证对控件值更改的控制，例如 jquery 验证？

更新：

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

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');
            }
        });
    }
4

1 回答 1

3

你有两种方法来实现你的目标：

在 KendoUI 中使用 jQuery Unobtrusive Validation

背景

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

解决方案

您有 2 种方法可以解决此问题，并且可以完美地使用这两种技术。阅读使 Kendo UI 编辑器与 jQuery 验证一起工作，如果您有任何实施问题，请阅读Kendo UI NumericTextBox 与 jQuery 验证作为NumericTextBox的示例

然后，在验证的情况下，您可能无法分配正确的 CSS 类。您可以阅读将 jquery 验证添加到 kendo ui 元素。

只使用 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（提交按钮除外）Unobtrusive Validation

更新

用于使用最后一个解决方案实现的道场，该解决方案添加了一个带有验证消息pattern="\d+"的搜索输入。验证由filtering事件调用相同的输入。请注意，您应该使用基于 UI 元素的期望事件，这里我们使用filtering自动完成而不是change使用DropDownList。

我最近发现了一个新的实现，它看起来很适合尝试和测试。可在aspnet-mvc 入门验证中获得

于 2017-11-12T14:09:28.277 回答