How to display jQuery Validation error container only on submit

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 err

Answer 1

First your container should be using an ID instead of a class.. (I'm going to assume that ID is 'containererreurtotal')

Then Try this..

    $().ready(function() {

        $('div#containererreurtotal').hide();

        // validate signup form on keyup and submit
        $("#frmEnregistrer").validate({
            errorLabelContainer: "#containererreurtotal",
            wrapper: "p",
            errorClass: "error",
            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: { required: "Nickname required!", minLength: "Nickname too short!" },
                prenom_in: { required: "Prenom required!", minLength: "Prenom too short!" },
                nom_in: { required: "Nom required!", minLength: "Nom too short!" },
                password_in: { required: "Password required!", minLength: "Password too short!" },
                courriel_in: { required: "Courriel required!", email: "Courriel must be an Email" },
                userdigit: { required: "UserDigit required!" }
            },
            invalidHandler: function(form, validator) {
                $("#containererreurtotal").show();
            },
            unhighlight: function(element, errorClass) {
                if (this.numberOfInvalids() == 0) {
                    $("#containererreurtotal").hide();
                }
                $(element).removeClass(errorClass);
            }    

        });
    });

I am assuming here that you want a

tag around each of the individual errors. Typically I use a

container for the actual container (instead of the div you used called 'containererreurtotal') and a
• for each error (this element is specified in the "wrapper" line)

  If you specify #containererreurtotal as display: none; in your CSS, then you dont need the first line in the ready function ( $('div#containererreurtotal').hide(); )