Question

我正在将一个DropDownList用于我在Kendo UI网格弹出窗口中编辑的字段，虽然验证工具提示没有出现问题，但一旦输入得到纠正，它们就不会消失。

我正在创建DropDownList，如下所示：

  function serviceDropDownEditor(container, options) {
    $('<input data-bind="value:' + options.field + '" data-for="' + options.field + '"/>')
      .appendTo(container)
      .kendoDropDownList({
        optionLabel: "--- select a service ---",
        dataTextField: "name",
        dataValueField: "id",
        dataSource: window.services,  // an array I've already fetched from my DB
      });
  }

我在定义数据源时将此函数应用于字段service_id，如下所示：

  columns: [
    { field: "service_id",
      title: "Service",
      editor: serviceDropDownEditor,
      template: "#= getServiceName(service_id) #"  // display the name from the id
    },

为确保有放置验证消息的位置，我使用the suggestion on this page并在edit事件期间在DropDownList下方添加占位符范围：

  edit: function(e) {
    var grid = $("#grid").data("kendoGrid")
    var container = grid.editable.element
    var service_container= container.find("[data-container-for=service_id]")
    service_container.append('<span class="k-invalid-msg", data-for="#= field #">')
  },

当引发此字段（service_id）的服务器端错误时，我找到了我在edit事件中创建的占位符，并将其替换为实际消息，如下所示：< / p>

var placeholder = container.find("[data-for=" + field + "].k-invalid-msg")
placeholder .replaceWith(validationMessageTmpl({ field: field, message: errors[field] }))

验证消息模板包含与占位符相同的类和data-for属性。

在显示DropDownList的错误时效果很好，但是当我更正错误（并在同一表单上引入另一个错误，弹出窗口保持原状）时，原始错误不会消失。

那么......如何清除验证工具提示，我需要做什么？在事件中手动清除这个？

Answer 1

尝试手动清除下拉更改时的错误，例如：

function serviceDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '" data-for="' + options.field + '"/>')
  .appendTo(container)
  .kendoDropDownList({
    optionLabel: "--- select a service ---",
    dataTextField: "name",
    dataValueField: "id",
    dataSource: window.services,  // an array I've already fetched from my DB
    select: function (ev) {
       var validatable = container.editable.validatable;
       if (validatable) {
             var dataItem = this.dataItem(ev.item.index());
             if (dataItem === null || dataItem === undefined || dataItem.text == " " || dataItem.text == "&nbsp;") {
                            // force validation is empty (simulate required)
                            validatable.validate();
                        } else {
                        // hide all error messages if not empty
                            validatable.hideMessages();
                        }
                    }
                }
  });

}

Kendo UI网格弹出，DropDownList验证消息未被清除

1 个答案: