Add maxLength Validation

The following example demonstrates how to define custom Kendo UI validators to check the length of the text content or the length of the HTML content in a Kendo UI Editor.

Example

  <form id="employeeForm" novalidate="novalidate">
    <p>Both editors contain 100 characters.</p>

    <p>This editor has a max <em>text</em> length of 100 characters, so adding more formatting does not invalidate it</p>

    <span data-for='editor-maxtext' class='k-invalid-msg'></span>

    <textarea name="editor-maxtext" data-role="editor"
              data-maxtextlength="100"
              data-maxtextlength-msg="Text must be shorter than 100 chars">LoremLorem&lt;strong&gt;Lorem&lt;/strong&gt;LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem</textarea>

    <p>This editor has a max <em>html</em> length of 100 characters, so adding more formatting invalidates it</p>
    <span data-for='editor-maxhtml' class='k-invalid-msg'></span>

    <textarea name="editor-maxhtml" data-role="editor"
              data-maxhtmllength="100"
              data-maxhtmllength-msg="HTML must be shorter than 100 chars">LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem</textarea>

    <button class="k-button k-primary">Submit</button>
  </form>

  <script>
    var container = $("#employeeForm");

    kendo.init(container);

    container.kendoValidator({
      rules: {
        maxTextLength: function (textarea) {
          if (textarea.is("[data-maxtextlength-msg]") && textarea.val() != "") {
            var maxlength = textarea.attr("data-maxtextlength");
            var value = textarea.data("kendoEditor").value();
            return value.replace(/<[^>]+>/g, "").length <= maxlength;
          }

          return true;
        },
        maxHtmlLength: function(textarea) {
          if (textarea.is("[data-maxhtmllength-msg]") && textarea.val() != "") {
            var maxlength = textarea.attr("data-maxhtmllength");
            var value = textarea.data("kendoEditor").value();
            return value.length <= maxlength;
          }

          return true;
        }
      }
    });

    function save(e) {
      e.preventDefault();

      var validator = $("#employeeForm").data("kendoValidator");
      if (validator.validate()) {
        alert("Data saved");
      }
    }

    $("body").on("click", ".k-button", save);

  </script>

See Also

• Editor JavaScript API Reference
• How to Get Reference to Child Widgets
• How to Insert HTML Content via Custom Popup Tools
• How to Set Caret Position
• How to Show Editor in Full Screen
• How to Use Inline Editor inside Windows

For more runnable examples on the Kendo UI Editor, browse its How To documentation folder.