Set the linked label to class of error on validate, dont add extra label

Question

Instead of adding a label with class="error", I would like to add .error to the label I already have:

I have this:

<label class="requiredlabel" for="email_address">Your Email</label>
<input name="email_address" id="email_address" value="" class="text email required" type="text">

I just want the <label> to gain the class .error on a bad validation. currently, the plugin appends this:

<label class="error" for="email_address">This field is required.</label>

I'd rather it not add that label.

And of course, I want it to have eg, .error .invalid for emails.

Answer 1

Quote OP:

"Instead of adding a label with class="error", I would like to add .error to the label I already have ... I just want the <label> to gain the class .error on a bad validation."

Use the following callback functions to over-ride the defaults...

$('#myform').validate({
    // your other options, rules, etc,
    errorPlacement: function() {
        return false; // suppress the default error messages
    },
    highlight: function (element) {
        // on error add the error class to your label
        $(element).prev('label').addClass('error');  
    },
    unhighlight: function (element) {
        // on validation remove the error class from your label
        $(element).prev('label').removeClass('error');
    }
});

---

"And of course, I want it to have eg, .error .invalid for emails."

Quote OP Comment:

"I meant that I would like my label to have class="error invalid" when the user inputs a bad email address (for email inputs only, obviously). And simply 'error', when required but missing. I'm currently only checking my elements for 'required' and 'email' (as applicable)."

This is impossible. The plugin simply evaluates the rules and spits out the appropriate error message along with an error class or a valid class when there is no error. There is no way to specify a different error class for each rule.

Answer 2

Here is what I came up with, using Sparky's answer:

jQuery.validator.setDefaults({
errorPlacement: function() { return false;  },
highlight: function (element) {
    jQuery(element).addClass('error');
    jQuery(element).siblings( 'label' ).addClass('error'); // on error add the error class to your label 
}
,unhighlight: function (element) {
    jQuery(element).removeClass('error');
    jQuery(element).siblings( 'label' ).removeClass('error invalid'); // on validation remove the error class from your label
}
});

I used siblings() because I had a <br> between my label and input (therefore prev() wasnt working). This works because my label and input are wrapped in a div (there would be no danger of inadvertently adding a class to another label)

And then:

jQuery.validator.addMethod("email", function(value, element) {
valid = this.optional(element) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value);
if(!valid)
    jQuery(element).siblings( 'label' ).addClass('error invalid');
return valid;
},jQuery.validator.format("This part doesnt work, but i dont care") );

I just copied the original validation method, adding in my classes