jQuery验证插件错误CSS [英] jQuery Validate Plugin Error CSS

问题描述

我想/在错误时将标签字体颜色更改为RED或将文本框元素着色为红色.我正在使用的CSS对我不起作用，并且如果验证插件添加了标签错误，则不确定如何更改单选框/文本框的标签.

I would like to either/both change the label font color to RED on error or shade the textbox element red. The CSS I'm using is not working for me and not sure how to change the label of the radio/textbox instead if the label error which is added by the validate plugin.

//HTML

<form id="form1" name="form1" class="form1" method="post" >     
    <label for="gender">
        Gender                          
    </label>

    <input type="radio" name="gender" value="female" id="gender_0" />
        Female
    </input>
    <br />

    <input type="radio" name="gender" value="male" id="gender_1" />
        Male
    </input>
        <br />

        <label for="name">Name</label>                    
        <input type="text" name="name" id="name" />
    <br /><br />

    <input type="submit" name="Submit" value="Submit" />
</form>

//JS

$().ready(function() {

    $("#form1").validate({
        rules: {
            gender: "required",
                        name: "required"
        },
        messages: {
            gender: "Please select an option",
                        name: "Please enter your name"
        }
    });
});

//CSS

#form1 label.error {
    margin-left: 10px;
    width: auto;
    display: inline;
}

推荐答案

您可以将每个label-input组合包装在div中，然后使用内置的highlight函数:

You could wrap each label - input combo in a div and then use the built-in highlight function:

HTML

<form id="form1" name="form1" class="form1" method="post" >
    <div>    
        <label for="gender">Gender</label>
        <br /><input type="radio" name="gender" value="female" id="gender_0" />Female
        <br /><input type="radio" name="gender" value="male" id="gender_1" />Male
    </div>
    <div>
        <label for="name">Name</label>                    
        <input type="text" name="name" id="name" />
    </div>

    <br /><br />
    <input type="submit" name="Submit" value="Submit" />
</form>

jQuery

$("#form1").validate({
    rules: {
        gender: "required",
        name: "required"
    },
    messages: {
        gender: " - Please select gender",
        name: " - Please enter your name"
    },
    errorElement: "span",
    errorPlacement: function(error, element) {
        element.siblings("label").append(error);
    },
    highlight: function(element) {
        $(element).siblings("label").addClass("error");
    },
    unhighlight: function(element) {
        $(element).siblings("label").removeClass("error");
    }
});

CSS -错误/突出显示类

.error {
    color: red;
}

JSFiddle演示.

希望这会有所帮助！

这篇关于jQuery验证插件错误CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！