Jquery 验证隐藏 kendo-ui 控件 [英] Jquery validate hides kendo-ui controls

问题描述

我有一个使用 kendo-ui numericTextBox

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

我绑定它，然后，为了使它与 jquery 验证插件一起工作，我设置了以下设置:

I bind it, then, to make it work with jquery validate plugin, i set the following settings:

$("#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 包装器上).

When i try to submit the form and Cost input is invalid, it adds the errorClass properly (on .k-widget wrapper).

问题是，如果我再次按下提交按钮，kendo-ui 元素就会消失(带有 style="display: none;").

The problem is that, if i press the submit button again, then the kendo-ui element simply disappears (with style="display: none;").

我不知道是什么触发了这个.我已经看到，如果我将 errorClass 更改为 input-validation-error 以外的其他内容，则 kendo-ui 小部件仍然可见.

I don't know what is triggering this. I've seen that if i change the errorClass to something else other than input-validation-error, then the kendo-ui widget remains visible.

这个问题只发生在 kendo-ui 控件上，不会发生在标准的 html 输入上.

This issue happens only with kendo-ui controls, not also with standard html inputs.

我做错了什么?

推荐答案

我敢打赌数字 texbox 控件是双 div 包裹的，就像 datepicker 控件一样.以下是我在 validator 配置中使用的 highlight() 和 unhighlight() 函数，以确定将错误类应用于的元素:

I'm betting that the numeric texbox control is double-div-wrapped just like the datepicker control is. Here are the highlight() and unhighlight() functions I use in my validator configuration to determine what element to apply the error class to:

...
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 验证隐藏 kendo-ui 控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！