我有一个使用 kendo-ui numericTextBox
@Html.LabelFor(p => p.Cost)
@Html.TextBoxFor(p => p.Cost, new { @autocomplete = "off" })
我绑定(bind)它,然后,为了使其与 jquery 验证插件一起使用,我设置了以下设置:
$("#Cost").kendoNumericTextBox({
format: "c",
min: 0,
decimals: 2
});
$.validator.setDefaults({
ignore: [],
highlight: function (element, errorClass) {
element = $(element);
if (element.hasClass("k-input")) {
element.closest(".k-widget").addClass(errorClass);
} else {
element.addClass(errorClass);
}
},
unhighlight: function (element, errorClass) {
element = $(element);
if (element.hasClass("k-input")) {
element.closest(".k-widget").removeClass(errorClass);
} else {
element.removeClass(errorClass);
}
}
});
当我尝试提交表单并且 Cost
输入无效时,它会正确添加 errorClass(在 .k-widget
包装器上)。
问题是,如果我再次按下提交按钮,那么 kendo-ui
元素就会消失(带有 style="display: none;"
)。
我不知道是什么触发了这个。我发现,如果我将 errorClass 更改为 input-validation-error
以外的其他内容,则 kendo-ui
小部件仍然可见。
此问题仅发生在 kendo-ui
控件中,而不会发生在标准 html 输入中。
我做错了什么吗?
最佳答案
我敢打赌数字文本框控件是双 div 包装的,就像日期选择器控件一样。以下是我在 validator
配置中使用的 highlight()
和 unhighlight()
函数,以确定将错误类应用到哪个元素:
...
highlight: function (element, errorClass, validClass) {
var e = $(element),
parent = _getParent(e);
_addClass(e, parent);
},
unhighlight: function (element, errorClass, validClass) {
var e = $(element),
parent = _getParent(e);
_removeClass(e, parent);
}
...
function _getParent(element) {
// a Kendo DatePicker is double-wrapped, so that requires us to return the parent of the parent
return (element.parent().hasClass('k-picker-wrap')) ? element.parent().parent() : element.parent();
}
function _addClass (element, parent) {
if (parent.hasClass('k-widget')) {
parent.addClass('error');
} else {
element.addClass('error');
}
}
function _removeClass(element, parent) {
if (parent.hasClass('k-widget')) {
parent.removeClass('error');
} else {
element.removeClass('error');
}
}
关于Jquery validate 隐藏 kendo-ui 控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16633498/