New to Kendo UI for jQuery? Download free 30-day trial

Use Templates to Customize Tooltips in the Validator

Environment

Product Progress Kendo UI Validator for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I a template to customize a tooltip in the Kendo UI Validator?

Solution

The following example demonstrates how to use an errorTemplate to customize the tooltip in Kendo UI.

    <div id="example">
      <div class="demo-section k-header">
        <form id="tickets">
          <h3>Book Tickets</h3>
          <ul>
            <li>
              <label for="fullname" class="required">Your Name</label>
              <div style="display:inline-block">
                <input type="text" id="fullname" name="fullname" placeholder="Full name" required validationMessage="Enter {0}" style="width: 200px;" />
              </div>
            </li>
            <li  class="accept">
              <button id="submit" type="submit">Submit</button>
            </li>
            <li class="status">
            </li>
          </ul>
        </form>
      </div>
      <style scoped>
        .k-textbox {
          width: 11.8em;
        }
        .demo-section {
          width: 700px;
        }
        #tickets {
          width: 510px;
          height: 323px;
          margin: 0 auto;
          padding: 10px 20px 20px 170px;
          background: url('../content/web/validator/ticketsOnline.png') transparent no-repeat 0 0;
        }
        #tickets h3 {
          font-weight: normal;
          font-size: 1.4em;
          border-bottom: 1px solid #ccc;
        }
        #tickets ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
        }
        #tickets li {
          margin: 7px 0 0 0;
        }
        label {
          display: inline-block;
          width: 90px;
          text-align: right;
        }
        .required {
          font-weight: bold;
        }
        .accept, .status {
          padding-left: 90px;
        }
        .valid {
          color: green;
        }
        .invalid {
          color: red;
        }
        span.k-tooltip {
          margin-left: 6px;
        }
      </style>
      <script>
        $(document).ready(function() {
          $("#fullname").kendoTextBox();
          $("#submit").kendoButton();
          var errorTemplate = '<div class="k-widget k-tooltip k-tooltip-error"' +
              'style="margin:0.5em; display:block"><span class="k-icon k-warning"> </span>' +
              '#=message#<div class="k-callout k-callout-n"></div></div>'
          var validator = $("#tickets").kendoValidator({
            errorTemplate: errorTemplate
          }).data("kendoValidator");
          var status = $(".status");
          $("form").submit(function(event) {
            event.preventDefault();
            if (validator.validate()) {
              status.text("Hooray! Your tickets has been booked!")
                .removeClass("invalid")
                .addClass("valid");
            } else {
              status.text("Oops! There is invalid data in the form.")
                .removeClass("valid")
                .addClass("invalid");
            }
          });
        });
      </script>
    </div>

See Also

In this article