title: How to display jQuery Validation error container only on submit
body: <p>I am trying to make the <a href="http://docs.jquery.com/Plugins/Validation" rel="nofollow noreferrer">Validation plugin</a> work. It works fine for individual fields, but when I try to include the demo code for the error container that contains all of the errors, I have an issue. The problem is that it shows the container with all errors when I am in all fields, but I would like to display the error container only when the user presses the submit button (but still show inline errors beside the control when losing focus).</p>
  
  <p>The problem is the message in the container.  When I took off the code as mentioned in the answer below for the container, the container output just displays the number of errors in plain text.  </p>
  
  <p>What is the trick to get a list of detailed error messages?  What I would like is to display "ERROR" next to the control in error when the user presses the tab button, and to have a summary of everything at the end when he presses submit. Is that possible?</p>
  
  <p><strong>Code with all input from here:</strong></p>
  
  <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>