jquery - jQuery验证不同的错误

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

我正在使用jQuery验证来更改这些输入的背景颜色，当用户单击“提交”按钮而没有正确填充它们时（我知道这并不理想，但是字段名称不言自明，红色背景对我来说足够了）。

但是，某些字段是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;
}

谢谢。

最佳答案

尝试这个：

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