validation - 在 HTML5 中输入无效后设置错误消息并防止网格中剑道的默认错误消息

Question

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

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

哪个事件显示错误消息。

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

此致

卢卡斯

Answer 1

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

...

哪个事件显示错误消息。

只需使用 运行您的 kendoValidatorvalidator.validate(); 错误消息也设置为validate().

像这样的东西应该工作：

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

该警告似乎隐藏在某些元素后面，因此您还可以将以下 errorTemplate 添加到您的 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

自己解决了我的问题。我将编辑该帖子，以便您了解我的意思，但首先我只是给出道场项目。

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

我的编辑：

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

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

    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>

这是我对我的问题的解决方案。

此致。