验证插件中的复选框错误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>