jQuery Validate Plugin Error 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;
}

回答1:

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 - the error/highlight class

.error {
    color: red;
}

JSFiddle Demo here.

Hope this helps !

回答2:

I really worked in the following way

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

来源：https://stackoverflow.com/questions/3891798/jquery-validate-plugin-error-css

标签

css

jquery-validate