驗證插件中的複選框錯誤jquery

Question

如果在最後一個複選框的文本之後沒有選中複選框，我想移動該錯誤。

HTML：

<form id="myform" value="aaa"> 
    <input type="checkbox" name="test[]" value='' />x 
    <input type="checkbox" name="test[]" value='' />y 
    <input type="checkbox" name="test[]" value='something' />z 
    <input type="submit" /> 
</form> 

的jQuery：

$(document).ready(function() { 
    $('#myform').validate({ 
     rules: { 
      'test[]': { 
       required: true 
      } 
     } 
    }); 
}); 

這是我曾嘗試：

errorPlacement: function(error, element) { 
if (element.is(':checkbox')) { 
    $(element).parent().last().addClass('error'); 
} else { 
    error.insertAfter(element); 
} 

但這種附加的類複選框的父我想上課在本例中爲「z」的複選框之後的最後文本之後添加。另外當我使用我的這段代碼時，錯誤不會顯示只有類被添加到父類。

JSFiddle Demo with parent class being added

JSFiddle Demo with error showing

Answer 1

你可以做這樣的事情

$(document).ready(function() { 
 
    $('#myform').validate({ 
 
     errorPlacement: function (error, element) { 
 
      if (element.is('[name="test[]"]')) { 
 
       error.appendTo(element.parent()); 
 
      } else { 
 
       error.insertAfter(element); 
 
      } 
 
     }, 
 
     rules: { 
 
      'test[]': { 
 
       required: true 
 
      } 
 
     }, 
 
     submitHandler: function (form) { // for demo 
 
      alert('valid form submitted'); // for demo 
 
      return false; // for demo 
 
     } 
 
    }); 
 
});

.error { 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> 
 

 
<form id="myform" value="aaa"> 
 
    <div> 
 
     <input type="checkbox" name="test[]" value='' />x 
 
     <input type="checkbox" name="test[]" value='' />y 
 
     <input type="checkbox" name="test[]" value='something' />z</div> 
 
    <input name="test" required /> 
 
    <input type="submit" /> 
 
</form>