Matt McCormick Matt McCormick - 1 month ago 19
Javascript Question

jQuery Validation - Using multiple errorLabelContainer

I have a form with four different fieldsets. For jQuery validation, I would like the errors from the inputs in each of the fieldsets to be placed in an error block at the top of the specific fieldset. For example:

<fieldset id="contact">
<legend>Contact Information</fieldset>
<ul id="errors_contact" class="messages"></ul>
<!-- input elements -->
</fieldset>

<fieldset id="financial">
<legend>Financial Information</legend>
<ul id="errors_financial" class="messages"></ul>
<!-- input elements -->
</fieldset>


Can this be done with jQuery validation?

Answer

It can't using errorLabelContainer specifically, there's one setting/store for errorLabelContainer in the code, but you can use the errorPlacement and wrapper options for the effect you want, for example:

$("form").validate({
  wrapper: "li",
  errorPlacement: function(label, elem) {
    elem.closest("fieldset").find(".messages").append(label);
  }
});

Instead of the standard .insertAfter() (normally placing the <label> after the element it goes with), this wraps it in a <li></li> and appends that to the .messages container for the current <fieldset>.