Question

我有一个使用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输入。

我做错了什么？

Answer 1

我打赌数字texbox控件是双重包装的，就像datepicker控件一样。以下是我在highlight()配置中使用的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');
  }
}

Answer 2

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

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

Jquery验证隐藏了kendo-ui控件

2 个答案: