2012-04-26 63 views
0

我正在使用jQuery驗證器來驗證用戶輸入。我想弄清楚什麼時候應該清除顯示在無效元素旁邊的自定義錯誤圖標。下面發佈的代碼會附加錯誤圖標。我試圖在showErrors事件中清除它,但沒有運氣。jquery驗證器:何時清除自定義錯誤圖標

$("#form1").validate({ 
       onfocusout: false, 
       onKeyUp: false, 

       rules: { 

       txtDate:{ 
        required: true 
       }, 
       txtType:{     
         required: true 
       }, 
       ddlTime:{     
         required: true 
       } 
       }, 
       messages: { 
       ddlTime: {     
         required: "Please select an option for Time" 
       }, 
       txtDate:{ 
        required: "<br>Please enter valid date" 
       }, 
       txtType: {     
         required: "<br>Please Enter valid type" 
       } 
       }, 
       errorPlacement: function(error, element) { 
        error.wrap("<li></li>").appendTo($("#dvErrorSummary")); 
        $('<div class="errorIcon"></div>').insertAfter(element); 
        } 
      }); 

這是我的CSS看起來像:

label.error { 
    color: red; 
    font-style: italic 
} 

    .errors { color: red; } 
    .errorIcon 
    { 
     background: url(../errorIcon.png); 
     width: 16px; 
     height: 16px; 
     display:inline; 

    } 

這是我的HTML看起來像:

<body> 
<html> 
<head runat="server"></head> 

     <form id="form1" runat="server"> 

      <ul id="dvErrorSummary" name="dvErrorSummary" class="errors"></ul> 

      <select id="ddlTime" name="ddlTime" </select> 
      <input id="txtDate" name="txtDate" /> 
      <input id="txtType" name="txtType" /> 

     </form> 
</body> 
</html> 

回答

1

這是一塊,在其中添加了錯誤消息容器

errorPlacement: function(error, element) { 
        error.wrap("<li></li>").appendTo($("#dvErrorSummary")); 
        $('<div class="errorIcon"></div>').insertAfter(element); 
        } 

可能是使用可以檢查長度屬性來插入errorIcon只有當值小於1

+0

長度是什麼? – Asdfg 2012-04-26 19:19:16

+0

div class =「errorIcon」 – defau1t 2012-04-26 19:20:35

+0

如果有多個錯誤,長度將大於1. – Asdfg 2012-04-26 19:21:47

0

這就是我所做的來解決這個問題:)

jQuery.extend(jQuery.validator.messages, { 
    required: '<i class = "icon-exclamation-sign"></i>' 
}); 

我用上面的方法試過,但我太多的黑客意識到它不可能是正確的。希望這有助於:)