Question

我有一个简单的html表单，有多个输入。

我正在使用jQuery验证来改变这些输入的de background颜色，当用户点击提交按钮时没有正确填充它们（我知道这不是理想的，但字段名称是自我解释的，红色背景足够我）。

但是，某些字段是type = radio或type = checkbox，我无法更改其背景颜色。我想将此字段的文本颜色更改为红色，或将文本的背景颜色更改为红色。我不知道如何将两个不同的类应用于jQuery验证中的不同元素。

以下是我的代码的相关部分：

JS：

<script>
    $(document).ready(function(){
        $("#registerForm").validate({
            rules: {
                firstname: {
                    required: true,
                    minlength: 2
                },
                lastname: {
                    required: true,
                    minlength: 2
                },
                gender: {
                    required: true  
                },
                policy: "required"
            },
            errorClass: 'invalidField'
    });
</script>

HTML：

<input id="firstname" name="firstname" />

<input id="lastname" name="lastname" />

<input type="radio" id="gender" name="gender" value="male" />Masculino
<input type="radio" id="gender" name="gender" value="female" />Feminino

<input type="checkbox" id="policy" name="policy" value="accept" />Eu li e aceito os termos acima

CSS：

.invalidField {
    background-color: #ffdddd;
}

感谢。

Answer 1

试试这个：

HTML：

<input id="firstname" name="firstname" />

<input id="lastname" name="lastname" />

<div>
    <input type="radio" id="gender" name="gender" value="male" />
    <span class="highlightMe">Masculino</span>

    <br/>

    <input type="radio" id="gender" name="gender" value="female" />
    <span class="highlightMe">Feminino</span>
</div>

CSS：

.invalidField {
    background-color: #ffdddd;
}

.invalidField ~ .highlightMe {
    background-color: #ffdddd;
}

Answer 2

您可以尝试使用errorPlacement。把它放在验证函数中的开括号之后：

$("#registerForm").validate({ 
    errorPlacement: function (error, element) {
       if (element.attr("name") == "elementName") {
            $(element).css('background-color', '#ffdddd')
       }
    }, // continue your validation code (rules + errorclass)    
});

将'elementName'更改为输入的名称。您可以更改element.attr（）==''以测试它是否为type = radio或type = checkbox。

Answer 3

你不能在jQuery validate的每个元素上使用相同的类，但是使用更具体的CSS规则来获得你想要的颜色，例如：

.invalidField {
    background-color: #ffdddd;
}
input[type=checkbox].invalidField,
input[type=radio].invalidField {
    color: #ffdddd;
}

Answer 4

我设法通过在收音机和复选框输入中添加一些特定的JS来做我想要的。这是我做的：

JS：

$('#policy').change(function(){
    if (this.checked) {
        $('.policyError').css('background-color', '#ffffff')
    }
    else {
        $('.policyError').css('background-color', '#ffdddd')
    }
});
$('.gender').change(function() {
    $('.genderError').css('background-color', '#ffffff')
});

HTML：

<input type="radio" class="gender" name="gender" value="male" ><span class="genderError">Masculino</span>
<input type="radio" class="gender" name="gender" value="female" /><span class="genderError">Feminino</span>
<input type="checkbox" id="policy" name="policy" value="accept" /><span class="policyError">Eu li e aceito os termos acima</span>

CSS：

.invalidField {
    background-color: #ffdddd;
}
.invalidField ~ .genderError {
    background-color: #ffdddd;
}
.invalidField ~ .policyError {
    background-color: #ffdddd;
}

Answer 5

您需要使用highlight和unhighlight回调函数选项。从默认值开始，只需编辑它们即可在radio和checkbox元素上执行不同的操作。

我已经通过更改条件语句来修改默认值，以查找radio或checkbox元素。在验证每个元素时，会为每个元素触发这些回调。

hightlight就会触发。
unhighlight会在特定元素通过验证时触发。

您只需要调整这两个函数中每个函数的一部分，就可以对这些元素进行任何样式化。

    highlight: function (element, errorClass, validClass) {
        if (element.attr("type") === "radio" || element.attr("type") === "checkbox") {
            // change this line to add special 'error' styling to radio and checkbox elements
            this.findByName(element.attr("name")).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.attr("type") === "radio" || element.attr("type") === "checkbox") {
            // change this line to remove the special 'error' styling to radio and checkbox elements
            this.findByName(element.attr("name")).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
        }
    },

在演示中，我使用了your answer中的代码。

DEMO：http://jsfiddle.net/qwj5S/

   highlight: function (element, errorClass, validClass) {
        if ($(element).attr("name") === "gender") {
            $('.genderError').addClass('invalidField');
        } else if ($(element).attr("name") === "policy") {
            $('.policyError').addClass('invalidField');
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if ($(element).attr("name") === "gender") {
            $('.genderError').removeClass('invalidField');
        } else if ($(element).attr("name") === "policy") {
            $('.policyError').removeClass('invalidField');
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
        }
    },

<强> CSS ：

没有特别的CSS。这使用相同的invalidField类，因为它共享相同的属性。

jQuery验证不同的错误

5 个答案: