CODEWITHSUNDEEP
jqueryjquery-validate
Strontium_99
Strontium_99

Reputation: 1813

Jquery validate plugin how to add error class to label

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.

Upvotes: 9

Views: 25280

Answers (2)

SpareMe
SpareMe

Reputation: 71

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

Upvotes: 3

politus
politus

Reputation: 6086

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

Upvotes: 15

Related Questions