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?

Nick Craver · Accepted Answer · 2010-09-28 22:29:49Z

5

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

answered Sep 28, 2010 at 22:29

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Matt McCormick Over a year ago

Thanks, I was part way there with this. I am still getting the <label> tags in the error ie. <ul class="messages" id="errors_about"><li><label for="first_name" generated="true" class="error" style="display: block;">First name is required</label></li></ul>

Nick Craver Over a year ago

@Matt - Usually you want then...so clicking the error takes you right to the element, do you not want this?

Matt McCormick Over a year ago

Oh right, of course. My CSS on the page uses display: block for labels. I will just change it to inline for .messages.

Matt McCormick Over a year ago

Actually, display: block is being set in the actual element but I could still adjust the CSS.

Nick Craver Over a year ago

@Matt - You can change the errorElement if you want to something else, but I'd stick with <label> and fix the separate styling issue...does the .error class that's applied have display: block; in it?

fragilewindows · Accepted Answer · 2016-10-13 02:58:51Z

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 it had the height of labelcontainer less than 30px, it made a new empty row second time. I don't know why.

In my case it's a label - but it can be a div too, of course. In my HTML I have this (assuming you have the jQuery 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 (don't know how to make it look like 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 wasn't valid and return false if it isn't (so I don't post it.)

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

$("#MyForm").validate(<br>
{<br>
errorLabelContainer:"#errorlabel",<br>
messages : <br>
    {theNameofcontrol: {required: "" },<br>
    theNameofcontrol2: {required: "" },<br>
    theNameofcontrol3: {required: "" }<br>
    }   <br>
);<br>
<br>
 if(! $("#MyForm").valid())<br>
{<br>
$("#errorlabel").html("My message when not all contols are valid!");<br>
return false;<br>
}

Hope this is helpful for you. You should be able to do the same for the fieldset if you have a container for all the "objects" in the group.

To validate one control you use:

$("#MyForm").validate({errorLabelContainer:"#errorlabel",messages :{theNameofcontrol: {required: "This has to have a value" }}}).element("#theNameofcontrol");

Good luck

Collectives™ on Stack Overflow

jQuery Validation - Using multiple errorLabelContainer

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related