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

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

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

jQuery validation with custom CSS checkbox

jquery

html

css

jquery-validate