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>
这是我解决问题的方法。
此致。
我坚持使用 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>
这是我解决问题的方法。
此致。