使用Kendo UI驗證程序如何隱藏默認驗證錯誤消息並僅在工具提示上顯示消息

Question

驗證當前正在發生正確。唯一的問題是，我想僅在工具提示中顯示錯誤消息，而不是通過下一個跨度顯示到輸入元素。我如何隱藏默認顯示？

我的CSS：

 <style scoped> 
     .k-textbox { 
      width: 11.8em; 
     } 

     .demo-section { 
      width: 700px; 
     } 

     #tickets { 
      width: 710px; 
      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> 

我的HTML：

<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_1" name="fullname" class="k-textbox" placeholder="Full name" required style="width: 200px;" /> 
        </div> 
       </li> 
       <li> 
        <label for="fullname" class="required">Your Name</label> 
        <div style="display:inline-block"> 
         <input type="text" id="fullname_2" name="fullname" class="k-textbox" placeholder="Full name" required style="width: 200px;" /> 
        </div> 
       </li> 

       <li class="accept"> 
        <button class="k-button" type="submit">Submit</button> 
       </li> 
       <li class="status"> 
       </li> 
      </ul> 
     </form> 
    </div> 

我的javascript：

 <script> 
     $(document).ready(function() { 

      var status = $(".status"); 

      var validator = $("#tickets").kendoValidator({ 
       rules: { 
        customRule1: function (input) { 
         if (input.is("[name=fullname]")) { 
          return input.val() === "peter" || input.val() === "john"; 
         } 
         return true; 
        } 
       }, 
       messages: { 
        required: "Field is required", 
        customRule1: "User name must be either Peter or John" 
       } 
      }); 


      var tooltip = $("#tickets").kendoTooltip({ 
       filter: ".k-invalid", 
       content: function (e) { 
        var errorMessage = $("#tickets").find("[data-for=" + e.target.attr("name") + "]"); 

        return '<span class="k-icon k-warning"> </span>' + errorMessage.text(); 
       } 
      }); 

      $("form").submit(function (event) { 
       event.preventDefault(); 

       if (validator.validate()) { 
        status.text("Hooray! Your tickets have been booked!") 
        .removeClass("invalid") 
        .addClass("valid"); 
       } else { 
        status.text("Oops! There is invalid data in the form.") 
        .removeClass("valid") 
        .addClass("invalid"); 
       } 

      }); 
     }); 

    </script> 

Answer 1

爲什麼不使用CSS？只需將此規則添加到您的款式中

.k-widget.k-tooltip-validation { 
    display: none !important; 
}