I am trying to make work the Validation plugin. 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. 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 (but still show inline error beside the control when losing focus).
The problem now once mixed up with some answer below:
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?
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?
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);
}
});
});