javascript - How to display jQuery Validation error container only on submit -

i trying make validation plugin work. works fine individual fields, when try include demo code error container contains of errors, have issue. problem shows container errors when in fields, display error container when user presses submit button (but still show inline errors beside control when losing focus).

the problem message in container. when took off code mentioned in answer below container, container output displays number of errors in plain text.

what trick list of detailed error messages? display "error" next control in error when user presses tab button, , have summary of @ end when presses submit. possible?

code input here:

    $().ready(function() {         var container = $('div.containererreurtotal');          // validate signup form on keyup , submit         $("#frmenregistrer").bind("invalid-form.validate", function(e, validator) {           var err = validator.numberofinvalids();           if (err) {             container.html("there "+ err + " errors in 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);                     }              });     }); 

you find documentation meta option in http://docs.jquery.com/plugins/validation/validate#toptions

if want display errors beside inputs and in separate error container need override errorplacement callback.

from example:

...                     courriel_in: "error",                     userdigit: "error"             }             ,errorcontainer: container              ,errorplacement: function(error, element){                 var errorclone = error.clone();                 container.append(errorclone);                 error.insertafter(element)                           }              // don't need options             //,errorlabelcontainer: $("ol", container)             //,wrapper: 'li'             //,meta: "validate"     });  ... 

the error parameter jquery object containing <label> tag. element parameter input has failed validation.

update comments

with above code error container not clear errors because contains cloned copy. it's easy solve if jquery gives "hide" event, doesn't exist. let's add hide event!

1. first need aop plugin

2. we add advice hide method:

               jquery.aop.before({target: jquery.fn, method: "hide"},                 function(){                     this.trigger("hide");                 }); 

3. we bind hide event hide cloned error:

           ...         ,errorplacement: function(error, element){             var errorclone = error.clone();             container.append(errorclone);             error.insertafter(element).bind("hide", function(){                 errorclone.hide();             });         }         ... 

give try