Jquery validate plugin how to add error class to label

Question

Using the jquery validate plugin and I'm trying to override it's default behavior. this is an example of my html:

<table>
<tr>
  <td>
    <label for="my-input>Name</label>
  </td>
</tr>
<tr>
  <td>
    <input type="text" class="required" id="my-input />
  </td>
</tr>
</table>

All I want the valadate to do is add the class .error to the existing label, and then remove it once the field passes validation.

Thanks.

Answer 1

this is the default behaviour, you just need to stop the error message being displayed on the page. You can do this by overriding errorPlacement

$('form').validate({
 errorPlacement: function () { }
});

EDIT.

sorry misread the question bit - the code below works but there is probably a better way

$('form').validate({
    // make sure error message isn't displayed
    errorPlacement: function () { },
    // set the errorClass as a random string to prevent label disappearing when valid
    errorClass : "bob",
    // use highlight and unhighlight
    highlight: function (element, errorClass, validClass) {
        $(element.form).find("label[for=" + element.id + "]")
        .addClass("error");
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element.form).find("label[for=" + element.id + "]")
        .removeClass("error");
    }
});

the above code comes from the highlight example on the options docs

Answer 2

errorElement: "label",
errorPlacement: function(error, element) {
    error.insertBefore(element.parent().children("br"));
},
highlight: function(element) {
    $(element).parent().addClass("error");
},
unhighlight: function(element) {
    $(element).parent().removeClass("error");
}