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

我正在使用自定义css样式，并已为我的复选框设置了样式

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

我之所以这样假设，是因为我必须对自定义样式的复选框使用

display:none

，因为它找不到向其添加错误消息标签的输入

我的其他表单字段可以很好地处理具有类似HTML的验证消息，但不会像复选框那样使用自定义图像替换css

关于如何让这两者都工作（自定义复选框样式和验证）有什么想法吗？ 谢谢

---

这是因为默认情况下隐藏的元素不会被验证，因此您可以使用

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

---

谢谢你，阿伦，但是它仍然不起作用：（没有显示验证消息）我的其他输入添加了以下内容，尽管此复选框没有添加。

请输入您的姓名

刚刚添加，但仍然没有成功：（我甚至尝试将表单更改为表单ID

#registryForm

和

最近的
选择器。有趣的是，它甚至不会发出
警报
！现在我通过从
文档中取出函数来发出警报。准备好了
函数，但仍然没有添加错误。接近：）阿伦，非常感谢你！在你的帮助下，它开始工作了：）由于某种原因，我无法加载小提琴，但它工作得非常好！！接受了你的回答。
$('form').validate({
    //other properties
    ignore: ':hidden:not(:checkbox)'
})

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