Question

I am building the validation plugin in my form and everyting is working well. But on checkboxes I get this as HTML:

Form Check HTML checkboxes:

<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>

As you can see the error is not standing outside the custom checkbox div. How can i do this?

The 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

Try this:

 error.insertAfter(element.parent());

because you want to add the message after the div (which is the parent) to the current element.

UPDATE: after chat discussion, the correct anser is:

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