Jquery验证隐藏了Kendo-UI控件。

Question

我有一个表单，使用了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);
        }
    }
});

当我尝试提交表单并且“成本”输入无效时，它会正确地添加errorClass（在“.k-widget”包装器上）。

问题在于，如果我再次按提交按钮，那么“kendo-ui”元素就会简单地消失（带有“style =”display：none;“”）。

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

这个问题只出现在“kendo-ui”控件中，而不是标准的HTML输入中。

我做错了什么吗？

- Catalin

---

你没有展示足够的代码来复现任何东西。表单的渲染HTML在哪里？.validate()声明在哪里？ - Sparky

@RaraituL 你有没有想到解决办法？我也遇到了同样的问题。 - aw04

Answer 1

我敢打赌数字文本框控件也像日期选择器控件一样有双层div包裹。以下是我在我的验证器配置中使用的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');
  }
}

- Brett

---

我已经做了一个非常类似于这个解决方案的东西，只是我不是在寻找 .k-picker-wrap 的 CSS 类，而是在寻找所有 kendo ui 控件都有的 .k-widget 类。 - Catalin

@RaraituL 嗯，这也是我找元素的方法，但无论我选择哪一个元素，在第二次提交时它仍会设置为“display:none”。 - aw04

@aw04：啊，没错。如果我没记错的话，是在jquery.validate.unobtrusive插件中的一段代码隐藏了一个控件。我想这个函数负责隐藏控件：function onError(error, inputElement)。不幸的是，我现在没有代码了，无法确定。 - Catalin

@RaraituL 很好，这是一个开始，我会研究一下的。感谢您抽出时间回来更新这篇文章。如果我找到了，我会添加一个答案供将来参考。 - aw04

Answer 2

为了解决在第二次提交时元素消失的问题，我做了以下操作：

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

- lentoPastel