jQuery Validation - Using multiple errorLabelContainer

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

Answer 2

I did it this way--> I had a form that had to validate multiple controls - but i wanted one area of error -and one message for all - one line.....

Default if you use errorLabelContainer it puts the validations as "add-ons" - that is multiple validations create many rows in the errorlabel. I noticed one thing- if i had the heigh of my labelcontainer less than 30 px it made a new empty row second time.. i dont know why.

In my case its a label - but i can be a div too of course --> In my html i have this (asuming you have the jqery validation.js and base):

Myform is the name of the form - then the different html controls- any type - for example--> INPUT id=theNameofcontrol type=checkbox name=theNameofcontrol validate=required:true

then the container for the error message (dont know how to make it look lite html :) ->

label id=errorlabel name=errorlabel style=font-size:1.3em;height:30;color:red; /label

in my onclick function for the form i put empty messages as errormessages and put a message if the form wasnt valid.....:and return false if it isnt - (so i dont post it)

Of course you can just fill in every custum message - but i wanted to have one line regardless of how many errors...

$("#MyForm").validate(
{
errorLabelContainer:"#errorlabel",
messages :
{theNameofcontrol: {required: "" },
theNameofcontrol2: {required: "" },
theNameofcontrol3: {required: "" }
}
);

if(! $("#MyForm").valid())
{
$("#errorlabel").html("My message when not all contols are valid!");
return false;
}

Hope this is helfpful for you . You should be able to do the same for the fieldset i you have a container for all the "objects" in the gruop To validate one control you use ->
$("#MyForm").validate({errorLabelContainer:"#errorlabel",messages :{theNameofcontrol: {required: "This has to have a value" }}}).element("#theNameofcontrol");

Good luck