Question

我使用JQuery validation plugin并使用自定义CSS样式设置了我的复选框样式。

对于我的自定义复选框，我使用纯CSS，如下所示。我遇到的问题是，当它验证时，它不会显示错误消息。

我之所以假设是因为我必须使用display:none作为自定义样式复选框，它无法找到输入以向其添加错误消息标签。

我的其他表单字段可以正常使用类似HTML的验证邮件但不使用自定义图片替换css，例如复选框。

关于如何使两者兼顾的任何想法（自定义复选框样式和验证）？感谢

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);
        }
    }
})

使用自定义CSS复选框进行jQuery验证

1 个答案: