HTML5 中的输入无效后设置错误消息并防止来自 kendo 的默认错误消息出现在网格中

Question

我坚持使用 kendo 网格中的内联验证。我不想在失去焦点后进行验证。我想在输入后立即验证。所以我开始使用 HTML5 验证器。它工作得很好，但问题是我无法回答这两个问题：

哪个事件将输入从有效设置为无效。

哪个事件显示错误消息。

我目前的工作：https://dojo.telerik.com/OSONo/56

此致

卢卡斯

Answer 1

which event set the input from valid to invalid.

...

which event displays the error message.

只是运行你的 kendoValidator 和 validator.validate(); 错误消息也设置为 validate().

像这样的东西应该可以工作：

$(document).on('input propertychange', function() {
    validator.validate();
});

警告似乎隐藏在某些元素后面，因此您还可以将以下错误模板添加到您的 kendoValidator 中：

errorTemplate: '<div class="k-widget k-tooltip k-tooltip-validation" style="margin: 0.5em; display: block;"><span class="k-icon k-i-warning"></span>#=message#<div class="k-callout k-callout-n"></div></div>'

以及整个解决方案： https://dojo.telerik.com/OSONo/66

Answer 2

我自己解决了我的问题。我将编辑 post 以便您明白我的意思，但首先我只提供 dojo 项目。

https://dojo.telerik.com/OSONo/64

我的编辑：

我很抱歉我之前的回答，我只是想给他我在评论中提到的解决方案。

在我的解决方案中，我创建了一个事件侦听器，如何侦听所有输入元素。当某些东西改变它时，保存当前光标位置（它的输入用于 ie 支持），然后它触发我的 "change" 事件。 "change" 事件检查它是否有效。如果它无效，kendo 验证器立即显示错误消息（不是默认的模糊事件）。

    var ValidierungCheckClass = (function () {
return {
    AllDOMElements: function () {
        $('body').on('input', function () {
            var myActiveElement = $(':focus');

            if ((myActiveElement) && (myActiveElement.context.activeElement.nodeName.toLowerCase() !== "body")) {
                var myActiveDOMElement = myActiveElement[0],

                   start = myActiveDOMElement.selectionStart, //just for IE Support
                   end = myActiveDOMElement.selectionEnd;           //just for IE Support

                myActiveElement.trigger("change");

                myActiveDOMElement.setSelectionRange(start, end); //just for IE Support

            }
        })
    }
    }
});

更改事件已从 kendo 创建，因此您不必自己编写。

至少在建站的时候要调用方法

<script>
        ValidierungCheckClass().AllDOMElements();
</script>

这是我解决问题的方法。

此致。

HTML5 中的输入无效后设置错误消息并防止来自 kendo 的默认错误消息出现在网格中

After Input goes Invalid in HTML5 set error message and prevent default error message from kendo in a grid

validation

kendo-ui

kendo-grid

html5-validation

kendo-validator