jquery驗證多個複選框設置錯誤放置

Question

我有多組複選框。

如何將錯誤消息放置到每組複選框的末尾。

此代碼實現將放置消息的第一個元素

The fiddle

<form id="myForm" action=""> 

<input type="checkbox" id="check0" name="check0" class="chkgroup"/> 
Set 1 check 1? 
<br /> 
<input type="checkbox" id="check1" name="check1" class="chkgroup"/> 
Set 1 check 2? 
<br /> 
<input type="checkbox" id="check2" name="check2" class="chkgroup"/> 
Set 1 check 3? 
<br /> 
<br /> 
<input type="checkbox" id="check3" name="check3" class="chkgroup2"/> 
Set 2 check 1? 
<br /><input type="checkbox" id="check4" name="check4" class="chkgroup2"/> 
Set 2 check 2? 
<br /><input type="checkbox" id="check5" name="check5" class="chkgroup2"/> 
Set 2 check 3? 
<br /><input type="submit" /> 

自定義方法之後是使用驗證複選框

$(function() { 
    jQuery.validator.addMethod("checkboxCheck", function(value, element,params) { 
      return $(params[0]+':checked').length > 0; 
    }); 
    $("#myForm").validate({ 

     rules: { 
      check0:{ 
       checkboxCheck:['.chkgroup'], 
      }, 
      check3:{ 
       checkboxCheck:['.chkgroup2'], 
      }, 
     }, 
     messages: { 
      check0:{ 
       checkboxCheck: "check your checkbox", 
      }, 
      check3:{ 
       checkboxCheck: "check your checkbox", 
      }, 
     }, 
     submitHandler: function(form) { 
      // ajax goes here 
      alert("valid form"); 
      return false; 
     } 
    }); 

}); 

Answer 1

你可以做到這一點與CSS float並在每個集合周圍的div包裝。 請參閱：http://jsfiddle.net/Xu7ZK/2/