jQuery Validate treats errors as separate instances instead of combining them

I am able to relocate my jquery validate errors to specific container set above my form but the elements show up as separate errors (multiple).

Ideally, I want to have one large error box (which on my other pages I already call with class 'error') and state something a long the lines of "Please fix the following errors:..." with the results being an unordered list.

My jquery is as follows:

<script type="text/javascript">
$(function() {     
    $("#login_form").validate({
        errorLabelContainer: "#containererreurtotal",
        wrapper: "li",
        errorClass: "error",
        rules: {
            AGTNO: 'required',
            AGTPW: 'required'
        },
        messages: {
            AGTNO: 'Your Number or Email Address is required.',
            AGTPW: 'Your Password is required.'
        },
        submitHandler: function(form) {
            $('body').append('<div id="overlay"></div>');
            $('#overlay').show();
            form.submit();
        }
    });
});
</script>

Above my form, I have the following:

<ul id="containererreurtotal"></ul>

any ideas where I am going 开发者_运维百科wrong?

http://jsfiddle.net/HK4TP/1/

Hide your error container and give it the appropriate styling, the rest will be handled by the plugin.