ошибка на флажках в validate plugin 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>