Jquery Validation : How to display error container only when Submitting?
<p>I am trying to make work the <a href="http://docs.jquery.com/Plugins/Validation">Validation plugin</a>. It works fine for individual field but when I try to include the demo code for the error container that contain all errors I have an issue. <strong>The problem is that it show the container with all error when I am in all fields BUT I would like to display the error container only when the user press Submit</strong> (but still show inline error beside the control when losing focus).</p>

<h2>The problem now once mixed up with some answer below:</h2>

<p>The problem is the message in the container, when I took off the code as mentionned in the answer below for the container, the container output is just a plain text displaying the number of error. What is the trick to get a list of detailled error message?</p>

<p>What I would like is to display "ERROR" next of the control in error when the user press TAB and to have a summary of everything at the end when he press Submit... is that possible?</p>

<h2>Code with all input from here:</h2>

<pre><code>    $().ready(function() {
        var container = $('div.containererreurtotal');



        // validate signup form on keyup and submit
  $("#frmEnregistrer").bind("invalid-form.validate", function(e, validator) {
    var err = validator.numberOfInvalids();
    if (err) {
      container.html("THERE ARE "+ err + " ERRORS IN THE FORM")
      container.show();
    } else {
      container.hide();
    }
  }).validate({
                    rules: {
                            nickname_in: {
                                 required: true,
            minLength: 4
                            },
                            prenom_in: {
                                 required: true,
            minLength: 4
                            },
                            nom_in: {
                                 required: true,
            minLength: 4
                            },
                            password_in: {
                                 required: true,
            minLength: 4
                            },
                            courriel_in: {
                                    required: true,
                                    email: true
                            },
                            userdigit: {
                                    required: true
                            }
                    },
                    messages: {
                            nickname_in: "ERROR",
                            prenom_in: "ERROR",
                            nom_in: "ERROR",
                            password_in: "ERROR",
                            courriel_in: "ERROR",
                            userdigit: "ERROR"
                    }

                    ,errorPlacement: function(error, element){
                            container.append(error.clone());
                            error.insertAfter(element);
                    }

            });
    });
</code></pre>
