代码之家 › 专栏 › 技术社区 › Phill Pafford

jquery验证插件错误css

jquery-validate css

Phill Pafford · 技术社区 · 15 年前

我想将标签字体颜色错误时更改为红色,或者将文本框元素设置为红色。我使用的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;
}

2 回复 | 直到 15 年前

Valentin Flachsel 15 年前

label input div highlight

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

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

.error {
    color: red;
}

JSFiddle Demo here

Rick 12 年前

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

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