Question

我想在错误时将标签字体颜色更改为RED，或者将文本框元素设置为红色。我正在使用的CSS对我不起作用，如果由validate插件添加标签错误，则不确定如何更改收音机/文本框的标签。

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

Answer 1

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

<强> 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 Demo here

希望这有帮助！

Answer 2

我真的按照以下方式工作

的 HTML

<div class="control-group"> <label for="name" class="control-label"> Name:<em>*</em></label> <div class="controls"> <input type="text" id="name"></div> </div>

<强> 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).closest('.control-group').removeClass('success').addClass('error'); }, success: function(element) { element .text('OK!').addClass('valid') .closest('.control-group').removeClass('error').addClass('success'); }

}）;

<强> CSS

.control-group.error input, .control-group.error select, .control-group.error textarea { border-color: #b94a48;} .control-group.error .control-label, .control-group.error .help-block, .control-group.error .help-inline { color: #b94a48; } .control-group.success input, .control-group.success select, .control-group.success textarea { border-color: #468847; } .control-group.success .control-label, .control-group.success .help-block, .control-group.success .help-inline { color: #468847; }

jQuery Validate插件错误CSS

2 个答案: