使用自定义CSS的jQuery验证复选框 [英] jQuery validation with custom CSS checkbox

问题描述

我使用 JQuery验证插件，并将自定义css样式的复选框设置为样式。

I'm using JQuery validation plugin and have styled my checkbox with custom css styles.

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

For my custom checkbox I'm using pure CSS as shown below. The issue I'm having is that when it validates it doesn't display the error message.

我假设，因为我必须使用显示：无对于自定义样式的复选框，它无法找到要添加错误消息标签的输入。

I'm assuming because I have to use display:none for the custom styled checkbox it can't find the input to add the error message label to it.

我的其他表单字段使用类似HTML的验证消息，但不使用自定义图像替换css像复选框。

My other form fields work fine with the validation messages with similar HTML but not using custom image replacement css like for the checkbox.

任何想法，如何我可以让两个工作和验证）？
感谢

Any idea on how I can get both to work (custom checkbox style AND validation)? 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>

我也尝试添加以下内容，但还是没有运气。

I've also tried adding the following but still no luck.

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

推荐答案

这是因为默认情况下， ，因此您可以使用忽略选项验证隐藏字段，例如

It is because by default the hidden elements are not validated, so you can use the ignore option to validate the hidden field like

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

如果要自定义错误位置，您还可能必须覆盖`errorPlacement。

You may also have to override the `errorPlacement, if you want to customize the error placement.

//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验证复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！