jQuery Validate Plugin Error CSS

Question

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

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