Question

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 1

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>.