Jquery validate 隐藏 kendo-ui 控件

2024-03-04

我有一个表格使用kendo-ui numericTextBox

@Html.LabelFor(p => p.Cost)
@Html.TextBoxFor(p => p.Cost, new { @autocomplete = "off" })

然后,我绑定它,使其与 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 包装的,就像日期选择器控件一样。这里有highlight() and unhighlight()我在我的中使用的功能validator配置以确定将错误类应用到哪个元素:

...
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');
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery validate 隐藏 kendo-ui 控件 的相关文章

随机推荐