jQuery驗證成功指示器

Question

好吧，我想我有這個錯誤......但我似乎無法得到答案。我只是試圖創建一個成功的選中標記或指示器，用戶輸入到輸入表單中的內容是有效的。腳本的註釋部分是我想要實現什麼的想法。下面是該腳本：

$('document').ready(function(){ 
    $('form').validate({ 
     rules: { 
      a: {required:true, minlength:2}, 
      b: {required:true} 
     },  
     messages: { 
      a: {required: "enter your name!"}, 
      b: {required: "enter the date!"}       
     }, 
     errorPlacement: function(error, element) { 
     if(element.attr('name') == 'a'){ 
      $('#name').html(error);     
     } 
     if(element.attr('name') == 'b'){ 
      $('#date').html(error);     
     } 
     }, 
     success: function(error){ 
      //a: {$('#name').html('nice name!');}, 
      //b: {$('#date').html('nice date!');}       
     }, 
     debug:true 
    }); 
    $('#a').blur(function(){ 
     $("form").validate().element("#a"); 
    }); 
}); 

這裏是HTML：

<form action="#" id='commentForm'> 
    <input type="text" name="a" id="a"> 
    <input type="text" name="b" id="b"> 
    <button type="submit">Validate!</button> 
<div id="date" style="border:1px solid blue;"></div> 
<div id="name" style="border:1px solid red;"></div> 
</form> 

最後，但並非最不重要的，這裏是的jsfiddle：

http://jsfiddle.net/mmw562/wQxQ8/8/

提前許多感謝你的幫助！

Answer 1

success:裏面的部分是類名或JavaScript回調函數，它看起來就像其他函數一樣。但是相反，您將它編寫爲一組插件選項。另外，因爲它被稱爲「成功」，爲什麼error在沒有任何東西時會被傳入？ As per the documentation它應該是這個樣子......

success: function(label){ 
    label.addClass("valid").text("Ok!");       
}, 

http://docs.jquery.com/Plugins/Validation/validate#toptions

如果指定，則顯示錯誤的標籤，以顯示一個有效的元素。如果給出一個字符串 ，它將作爲一個類添加到標籤中。如果一個函數給出了 ，那麼它的標籤（作爲一個jQuery對象）作爲其唯一的 參數被調用。這可以用來添加一個文本，如「OK！」。

這是您的jsFiddle稍作修改以顯示基本概念。也許您可以在.validclass的CSS中使用複選標記作爲background-image。

http://jsfiddle.net/wQxQ8/12/

Answer 2

這裏是一個可能的解決方案：

$('document').ready(function(){ 
    $('form').validate({ 
     rules: { 
      a: {required:true, minlength:2}, 
      b: {required:true} 
     },  
     messages: { 
      a: {required: "enter your name!"}, 
      b: {required: "enter the date!"}       
     }, 
     errorPlacement: function(error, element) { 
     if(element.attr('name') == 'a'){ 
      $('#name').html(error);     
     } 
     if(element.attr('name') == 'b'){ 
      $('#date').html(error);     
     } 
     }, 
     success: function(label) { 
      var parentId = $(label).parent().attr("id"); 
      switch(parentId) { 
       case "name": 
        $(label).html("nice name"); 
        break; 
       case "date": 
        $(label).html("nice date"); 
        break; 
      }      
     }, 
     debug:true 
    }); 
    $('#a').blur(function(){ 
     $("form").validate().element("#a"); 
    }); 
}); 

更新小提琴：http://jsfiddle.net/wQxQ8/13/