Matt McCormick Matt McCormick - 3 months ago 24
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 id="financial">
<legend>Financial Information</legend>
<ul id="errors_financial" class="messages"></ul>
<!-- input elements -->

Can this be done with jQuery validation?


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:

  wrapper: "li",
  errorPlacement: function(label, elem) {

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