Jquery Validation: Display the error alongside the element and also append it to a div container
$().ready(function() {

    var container = $('div.controller');
    // validate signup form on keyup and submit
    $("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
        },
        messages: {
            firstname: "Please enter your firstname",
            lastname: "Please enter your lastname",
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 2 characters"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long",
                equalTo: "Please enter the same password as above"
            },
            email: "Please enter a valid email address"
        },

    });


});


</script>

<div class="master_container">
        <div class="master_container_inner">

        <div class="container">

        </div>

                <form class="cmxform" id="signupForm" method="get" action="">
    <fieldset>
        <legend>Validating a complete form</legend>
        <p>
            <label for="firstname">Firstname</label>
            <input id="firstname" name="firstname" />
        </p>
        <p>
            <label for="lastname">Lastname</label>
            <input id="lastname" name="lastname" />
        </p>
        <p>
            <label for="username">Username</label>
            <input id="username" name="username" />
        </p>
        <p>
            <label for="password">Password</label>
            <input id="password" name="password" type="password" />
        </p>
        <p>
            <label for="confirm_password">Confirm password</label>
            <input id="confirm_password" name="confirm_password" type="password" />
        </p>
        <p>
            <label for="email">Email</label>
            <input id="email" name="email" />
        </p>
        <p>
            <input class="submit" type="submit" value="Submit"  />
        </p>
    </fieldset>
</form>

        </div>
    </div>

showErrors: function(errorMap, errorList) {
            if (submitted) {
                var summary = "You have the following errors: n";
                $.each(errorList, function() { summary += " * " + this.message + "n"; });
                //alert(summary);
                $("div.container").html(summary);
                $("div.container").show();
                submitted = false;
            }
            else
            {
                $("div.container").hide();
            }
            this.defaultShowErrors();
        },
        invalidHandler: function(form, validator) {
            submitted = true;
        }