刪除無效字段上的默認錯誤消息

Question

我正在使用jquery驗證插件，並且驗證工作方式與我想要的非常相似，但是我遇到了一個小問題。

當輸入字段被驗證時，我在輸入字段旁邊顯示一個綠色刻度標記，指示字段已被成功驗證。

如果頁面上有錯誤，我會在頁面頂部顯示一條錯誤消息，指出無效字段的數量。

所有這些工作正常。

如果輸入字段被修改並且不再有效，則會出現該問題。驗證刪除會刪除輸入字段旁邊的綠色勾號標記，這是正確的，但它會在輸入字段旁邊顯示默認錯誤消息。我不想在輸入字段旁邊顯示錯誤消息。

如何在字段變爲無效時刪除默認錯誤消息文本？

這裏是一個working demo on jsfiddle

<script type="text/javascript"> 

    var j$ = jQuery.noConflict(); 

    j$(document).ready(function(){ 

     j$.validator.addMethod("money", function(value, element) { 
      return this.optional(element) || /^(\d{1,3})(\.\d{2})$/.test(value); 
     }, "Must be in US currency format 0.99"); 

     var validator = j$('[id$=Details]').validate({ 
      invalidHandler: function() { 
       j$("#error-message").html('<img src="{!URLFOR($Resource.event_ver2, 'images/error-icon.png')}" width="32" height="32">').append(" Please correct the entries highlighted below. " + validator.numberOfInvalids() + " field(s) are invalid."); 
      }, 
      success: function(label, element) { 
       label.html('<img src="{!URLFOR($Resource.event_ver2, 'images/success-icon.png')}" width="16" height="16" class="validated">').insertAfter(element); 
      }, 
      errorPlacement: function(error, element) { 
       return false; 
      } 
     }); 

     j$('[id$=Email]').rules("add",{ 
      required: true, 
      email: true 
     }); 

     j$('[id$=Credit_Amount]').rules("add",{ 
      required: true, 
      'money': true 
     }); 

     j$('[id$=Credit_Card_Number]').rules("add",{ 
      required: true, 
      creditcard2: function() { return j$('[id$=Credit_Card_Type]').val(); } 
     }); 

     j$('[id$=Verification_Code]').rules("add",{ 
      required: true, 
      digits: true 
     }); 

     j$('[id$=Credit_Card_Type]').change(function(){j$('[id$=Details]').validate().element('[id$=Credit_Card_Type]') }); 
    }); 
</script> 

感謝您的幫助。

Answer 1

的主要障礙解決，這是你的複選標記被包圍在相同label元素作爲錯誤信息裏面，它的class總是.error是否含有錯誤信息或複選標記。

我能得到這個工作的唯一方法是永久消除動態生成的label。

1）在input旁邊增加了一個空的label，以完全消除這種動態生成的需求label。

<div> 
    Email: 
    <input id="email" type="text" name="email" class="required" maxlength="30" /> 
    <label></label> 
</div> 

2）修改了的jQuery放置&從同級label元件取消複選標記。

var j$ = jQuery.noConflict(); 

j$(document).ready(function() { 

    var validator = j$("#Details").validate({ 
     invalidHandler: function(form, validator) { 
      j$("#error-message") 
       .html('<img src="http://shc.dev1.cs3.force.com/MedicalStaffPayment/resource/1355859689000/event_ver2/images/error-icon.png" width="32" height="32">') 
       .append(" Please correct the entries highlighted below. " + validator.numberOfInvalids() + " field(s) are invalid."); 
     }, 
     success: function(label, element) { 
      j$(element).next('label') 
       .html('<img src=http://shc.dev1.cs3.force.com/MedicalStaffPayment/resource/1355859689000/event_ver2/images/success-icon.png width="16" height="16" class="validated">'); 
     }, 
     errorPlacement: function(error, element) { 
      j$(element).next('label').html(''); 
     } 
    }); 

    j$("#email").rules("add", { 
     required: true, 
     email: true 
    }); 
});​ 

Working DEMO:

http://jsfiddle.net/tXRjh/13/