Ошибка плагина проверки jQuery вне div

Question

Я создаю плагин проверки в моей форме, и все работает хорошо. Но на флажках я получаю это как HTML:

Флажки проверки формы HTML:

<div class="right">
    <div class="custom-checkbox"><input type="checkbox" name="family" value="" id="third-check" class="require-one error"><label for="third-check">Check off</label></div>
    <div class="custom-checkbox"><input type="checkbox" name="family" value="" id="fouth-check" class="require-one"><label for="fouth-check">Check off</label></div>
    <div class="custom-checkbox"><input type="checkbox" name="family" value="" id="five-check" class="require-one"><label for="five-check" class="">Check off</label></div>
    <div class="custom-checkbox"><input type="checkbox" name="family" value="" id="six-check" class="require-one">
    <label for="checks" generated="true" class="error">Please check at least one box.</label>
    <label for="six-check">Check off</label></div>
</div>

Как вы видите, ошибка не стоит за пределами пользовательского флажка div. Как я могу это сделать?

JS:

$.validator.addMethod('require-one', function(value) {
    return $('.require-one:checked').size() > 0;
}, 'Please check at least one box.');

var checkboxes = $('.right .require-one');
var checkbox_names = $.map(checkboxes, function(e, i) {
    return $(e).attr("name")
}).join(" ");

$(".valid").validate({
    meta: "validate",
    groups: { checks: checkbox_names },
    errorPlacement: function(error, element) {
    if (element.attr("type") == "checkbox") 
        error.insertAfter(checkboxes.last());
    else
        error.insertAfter(element);
    }  
});

Answer 1

Попробуйте это:

 error.insertAfter(element.parent());

, потому что вы хотите добавить сообщение после div (который является родительским) к текущему элементу.

UPDATE: после обсуждения в чате,Ансер:

error.insertAfter(element.parent().siblings().last());

Answer 2

Вы можете сделать что-то подобное, это сработало для меня. «optLocation» - это флажки, аналогичные «семье» в приведенном выше примере

jQuery("#frmAddProducts").validate({                                  
    errorElement:'div',
    errorPlacement: function(error, element) {error.appendTo (element.siblings(".errordiv")); },    
    rules: { 
                txtProductTitle:{required: true}, 
                txtPrice:{required: true, number: true}, 
                optCategory:{required: true}, 
                optMainCategory:{required: true}, 
                txtProductImage:{required: true},
                optLocation:{required: true, minlength: 1},                 
                txtSummary:{required: true}, 
                txtDetails:{required: true}
            },
    messages: {
                txtProductTitle: { required: "Please enter a title" },
                txtPrice:{required: "Please enter a price",number: "Please enter only digits"}, 
                optCategory:{required: "Please select a sub-category"}, 
                optMainCategory:{required: "Please select a category"},
                txtProductImage:{required: "Please upload images"},
                optLocation: { minlength: "Please select a location", required: "Please select a location" },
                txtSummary:{required: "Please enter summary"}, 
                txtDetails:{required: "Please enter description"}
            },
    submitHandler: function() { fnAddProduct(); }

    });