Jquery validate 隐藏 kendo-ui 控件答案

【问题标题】：Jquery validate hides kendo-ui controlsJquery validate 隐藏 kendo-ui 控件
【发布时间】：2013-05-19 10:08:11
【问题描述】：

我有一个使用kendo-ui numericTextBox的表单

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

然后，我绑定它，使其与 jquery validate 插件一起使用，我设置了以下设置：

$("#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 输入也不发生。

我做错了什么？

【问题讨论】：

您没有显示足够的代码来重现任何内容。表单的渲染 HTML 在哪里？ .validate() 声明在哪里？
@RaraituL 你有没有想过解决这个问题？我也有同样的问题。

标签： jquery jquery-validate kendo-ui

【解决方案1】：

我打赌数字 texbox 控件是双 div 包装的，就像 datepicker 控件一样。以下是我在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');
  }
}

【讨论】：

我已经做了一个与这个非常相似的解决方案，除了搜索.k-picker-wrap css 类，我正在寻找.k-widget 类，所有kendo ui 控件都有它
@RaraituL 嗯，这也是我为找到元素所做的，但无论我选择哪个元素，它仍然会在第二次提交时设置“display:none”。
@aw04：啊，没错。如果我没记错的话，那是jquery.validate.unobtrusive 插件中的一段代码，它隐藏了一个控件。我认为这个函数负责隐藏控件function onError(error, inputElement)。不幸的是，我没有确切知道的代码了
@RaraituL 酷，这是我将研究它的开始。感谢您抽出宝贵时间回来更新这篇文章。如果我找到它，我会添加一个答案以供将来参考。

【解决方案2】：

为了解决第二次提交时元素消失的问题，我这样做了：

$("form").submit(function (event) {
  $(".k-widget").removeClass("input-validation-error");
}

【讨论】：