Question

I am trying to make the Validation plugin 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).

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.

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?

Code with all input from here:

    $().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);                     }              });     }); 

Answer 1

You will find the documentation for the meta option in http://docs.jquery.com/Plugins/Validation/validate#toptions

If you want to display the errors beside the inputs AND in a separate error container you will need to override the errorPlacement callback.

From your example:

...                     courriel_in: 'ERROR',                     userdigit: 'ERROR'             }             ,errorContainer: container              ,errorPlacement: function(error, element){                 var errorClone = error.clone();                 container.append(errorClone);                 error.insertAfter(element)                           }              // We don't need this options             //,errorLabelContainer: $('ol', container)             //,wrapper: 'li'             //,meta: 'validate'     });  ... 

The error parameter is a jQuery object containing a <label> tag. The element parameter is the input that has failed validation.

Update to comments

With the above code the error container will not clear errors because it contains a cloned copy. It’s easy to solve this if jQuery gives a ‘hide’ event, but it doesn’t exist. Let’s add a hide event!

1. First we need the AOP plugin

2. We add an advice for the hide method:

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

3. We bind the hide event to hide the cloned error:

           ...         ,errorPlacement: function(error, element){             var errorClone = error.clone();             container.append(errorClone);             error.insertAfter(element).bind('hide', function(){                 errorClone.hide();             });         }         ... 

Give it a try