jQuery form validation plugin, error container div placement

While trying the bassistance.de's jQuery form validation plugin I ran into something interesting.

If I provide an errorPlacement option to append errors in a <div id="errContainer"></div> and place this div outside the <form>, the error messages are duplicated each time a validation occurs. Whereas, if the errContainer div is placed inside the <form>, things work just fine.

Example HTML:

<form id="frmQuote" action="#" method="get">
   <input type="text" name="txtQuote"/>
   <button type="submit" id="btn">Send</button>
</form>
<div id="errContainer"></div>

plugin option:

errorPlacement: function(error, element){
        error.appendTo($("#errContainer")); 
    }
//... further options

For this case, the errors duplicate as and when an element is validated. If I submit the form, the whole bunch of errors is displayed a开发者_JS百科gain, below the previous errors.

Is the placement of the div a dependency? Or am I doing something wrong?

Thanks for the help :)

Instead of using errorPlacement in this case, you should use the errorLabelContainer, which would do exactly what you are wanting, and also manage the errors correctly (i.e. not duplicate them):

$('#my-form').validate({
   //other options, rules, etc
   errorLabelContainer:'#errContainer'
});