1

我有一个简单的 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;
}

谢谢。

4

5 回答 5

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;
}
于 2013-03-19T21:05:34.903 回答
1

你可以试试errorPlacement。将其放在 validate 函数中的左括号之后：

$("#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。

于 2013-03-19T23:43:48.710 回答
0

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

.invalidField {
    background-color: #ffdddd;
}
input[type=checkbox].invalidField,
input[type=radio].invalidField {
    color: #ffdddd;
}
于 2013-03-19T23:24:53.473 回答
0

您将需要使用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);
        }
    },

在演示中，我使用了您回答中的代码。

演示：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类，因为它共享相同的属性。

于 2013-03-20T15:27:52.380 回答
0

我设法通过在收音机和复选框输入中添加一些特定的 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;
}
于 2013-03-20T15:14:54.843 回答