jQuery验证插件错误CSS

我想在出错时将标签字体颜色更改为红色，或者将文本框元素着色为红色。我使用的CSS不适用于我，并且不确定如果validate插件添加的标签错误，如何更改radio/textbox的标签

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

//CSS

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

---

您可以将每个

标签

-

输入

组合包装在

div

中，然后使用内置的

突出显示

功能：

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>

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

CSS-错误/突出显示类

.error {
    color: red;
}

---

希望这有帮助

我的工作方式如下

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>

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

}))

CSS

$("#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');
        }

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

---

嗯，不工作，在firebug中说'element.sibbins（“标签”）.addClass（“错误”）；'一点都不好，我的错。我已经更新了jQuery脚本中的突出显示/取消突出显示部分。这只是将元素弄乱了位置，没有显示任何内容。很抱歉，确实如此。我再次更新了代码，还添加了一个正在运行的JSFIDLE演示。谢谢，太棒了！！！还有一个问题。提交成功后，我如何获得警报弹出窗口？