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

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

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

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

哪个事件显示错误消息。

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

此致

卢卡斯

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

我自己解决了我的问题。我将编辑 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>

这是我解决问题的方法。

此致。