Validating jQuery with a custom CSS checkbox

Question

I use the jQuery validation plugin and created my checkbox with custom CSS styles.

For my custom checkbox, I use pure CSS, as shown below. The problem I am facing is that when it checks, it does not display an error message.

I assume that I should use a display:nonecustom style for the checkbox that cannot find the input to add the label of the error message.

My other form fields work fine with validation messages with similar HTML, but don't use a custom css image replacement like for a checkbox.

Any idea on how I can make both work (user style and checkbox checkbox)? Thanks

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label.checkboxLbl
{
background-image: url(../img/checkbox.png);
height: 18px;
width: 18px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label.checkboxLbl
{
background-position: 0 -18px;
height: 18px;
width: 18px;
display:inline-block;
padding: 0 0 0 0px;
}

<div class="checkbox mycheckbox">
        <span class="tncLabel"><strong>I have read and accept the <a class=
        "underLined" href="tnc" target="_blank">Terms and
        Conditions</a>*</strong></span> 
        <input class=
        "form-control css-checkbox" id="checkboxG1" name="checkboxG1" required=
        "required" title="Please accept our terms and conditions" type=
        "checkbox" value="1">
        <label class="css-checkbox-label checkboxLbl"
        for="checkboxG1"></label>
        <br style="clearfix">
</div>

, .

$("#registryForm").validate({
   ignore: []  // enables validation of hidden elements
});

Answer 1

, , ignore ,

$('form').validate({
    //other properties
    ignore: ':hidden:not(:checkbox)'
})

`errorPlacement, .

//your form here
$('form').validate({
    //other properties
    ignore: ':hidden:not(:checkbox)',
    errorPlacement: function (error, element) {
        if (element.is(":checkbox")) {
            alert('validating')
            element.closest('.checkbox').append(error)
        } else {
            error.insertAfter(element);
        }
    }
})