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

Valentin Flachsel · Accepted Answer · 2010-10-08 17:59:59Z

5

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 !

edited Oct 8, 2010 at 17:59

answered Oct 8, 2010 at 15:20

Valentin Flachsel

10.8k10 gold badges46 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Phill Pafford Over a year ago

hmm not working, in firebug says 'element.siblings("label").addClass("error");' not a function

Valentin Flachsel Over a year ago

Ooopsie, my bad. I have updated the highlight/unhighlight part in the jQuery script.

Phill Pafford Over a year ago

this just jumbles the elements out of place, nothing is displayed

Valentin Flachsel Over a year ago

Indeed it does, my apologies. I have updated the code again, and I have also added a working JSFiddle demo.

Phill Pafford Over a year ago

Thanks works awesome!!! just one more question. How do I get a alert popup after submit is successful?

|

Rick · Accepted Answer · 2013-09-17 17:30:59Z

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

Collectives™ on Stack Overflow

jQuery Validate Plugin Error CSS

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related