CODEWITHSUNDEEP
javascriptjqueryhtmlcssvalidation
Samsquanch
Samsquanch

Reputation: 9146

JQuery Validation Plugin help

I am trying to use the validation plugin for JQuery to validate a form, but I want it to not only show an error message, but also change the css for the td above it. I currently have

function myErrorHandle(element) {
    element.closest("td").addClass("fsValidationError");
}
$("#fsForm691575").validate({
    errorPlacement: myErrorHandle,
    rules: {
        field7014601: {
            required: true
        }
});

Where fsForm691575 is my form and field7014601 is just a name field. I just sort of hacked the myErrorHandle function together from another suggestion I found, so if I can do away with that but still get the desired effect, that would be nice.

Thanks

Upvotes: 0

Views: 1465

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

I can't cater an answer specific to your case (no HTML), but I can show you how to change the default "highlight" action of validate.

For example, given the following HTML:

<form action="#">
  <table>
    <tr>
      <td>
        <input id='firstname' name='firstname' class='required' />
      </td>
    </tr>
    <tr>
      <td>
        <input id='lastname' name='lastname' class='required' />
      </td>
    </tr>
  </table>
  <input type="submit" value="submit" />
</form>

You could configure validate to color the parent tr red:

$("form").validate({
  errorClass: "error",
  highlight: function(element, errorClass, validClass) {
    $(element).closest("tr")
      .addClass(errorClass)
      .removeClass(validClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).closest("tr")
      .removeClass(errorClass)
      .addClass(validClass);
  }
});

Example: http://jsbin.com/afoju5/3/edit

If you need even more granular control over what happens when you show errors, check out the showErrors option.

Upvotes: 3

Related Questions