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