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

Add a Red Border and Hide the Tooltip in the Validator


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


How can I hide the validation tooltip and add borders around input elements and components that failed to validate?


The following example demonstrates how to achieve this behavior and add a red border around the non-validated elements.

      #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;
        margin: 10px 0 0;
        padding: 0;
      #tickets ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      #tickets li {
        margin: 10px 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;
      .k-input.k-invalid {
        border: 1px solid red;
      <form id="tickets">
        <h3>Book Tickets</h3>
            <label for="fullname" class="required">Your Name</label>
            <input type="text" id="fullname" name="fullname" class="k-textbox" placeholder="Full name" required validationMessage="Enter {0}" style="width: 200px;" />
            <label for="search" class="required">Movie</label>
            <input type="search" id="search" name="search" required validationMessage="Select movie" style="width: 200px;"/><span class="k-invalid-msg" data-for="search"></span>
            <label for="time">Start time</label>
            <input id="datetime" name="datetime" required data-required-msg="Select date!" style="width: 200px;"/>
            <span class="k-invalid-msg" data-for="datetime"></span>
          <li  class="accept">
            <button id="submit" type="submit">Submit</button>
          <li class="status">
      $(document).ready(function() {
        var data = [
          "12 Angry Men",
          "Il buono, il brutto, il cattivo.",
          "One Flew Over the Cuckoo's Nest",
          "Pulp Fiction",
          "Schindler's List",
          "The Dark Knight",
          "The Godfather",
          "The Godfather: Part II",
          "The Shawshank Redemption"
          dataSource: data,
          separator: ", "
        var validator = $("#tickets").kendoValidator({
          validate: function(e) {
            status = $(".status");
        $("form").submit(function(event) {
          if (validator.validate()) {
            status.text("Hooray! Your tickets has been booked!")
          } else {
            status.text("Oops! There is invalid data in the form.")

See Also

In this article