Question

我想对editor文本框使用自定义验证。是的，可以通过在文本区域输入中添加 required 来完成，但是我想创建自己的自定义消息。似乎 schema > model > validation 对于字段 editor 不起作用。有办法吗？

full demo in here

$("#grid").kendoGrid({
  columns: [ {
    field: "fieltext", title:"Field 1", editor: textboxeditor
  } ],
  editable: true,
  scrollable: false,
  dataSource: {
    data: [ { num: 1 }, { num: 2 } ],
    schema: {
      model: {
        fields: {
          fieltext: { type: "number", validation: {required: {message: "This field is required"}} }
        }
      }
    }
  }
});

function textboxeditor(container, options) {
  $('<textarea class="k-textbox" required style="height: 50px; min-height: 80px; width: 60%; margin: 5px 0px 5px 0px; padding: 5px; min-width:80%; max-    width:80%" name="' + options.field + '" />').appendTo(container); 
}

Answer 1

这是答案，将“ validationMessage”添加到appendTo调用，然后在字段中单击，然后在字段外单击，然后显示验证消息。链接到此处的文档：https://demos.telerik.com/kendo-ui/validator/index

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script></head>
<body>
  <div id="grid"></div>

<script>
  $("#grid").kendoGrid({
    columns: [ {
      field: "fieldtext", title:"Field 1", editor: textboxeditor
    } ],
    editable: true,
    scrollable: false,
    dataSource: {
      data: [ { num: 1 }, { num: 2 } ],
      schema: {
        model: {
          fields: {
            fieldtext: { type: "number" }
          }
        }
      }
    }
  });

  function textboxeditor(container, options) {
    $('<textarea class="k-textbox" required validationMessage="TEST VALIDATION" style="height: 50px; min-height: 80px; width: 60%; margin: 5px 0px 5px 0px; padding: 5px; min-width:80%; max-width:80%" name="' + options.field + '" />').appendTo(container);
  }
</script>  
</body>
</html>

Kendo UI网格编辑器字段自定义验证

1 个答案: