jQuery validation .showErrors in div instead of alert

Question

I am looking for a way to use the jQuery validator.showErrors method to display a general error message above my form whenever there are any errors while at the same time displaying individual error messages by each field. I currently have the following code, but would like to change the alert to instead show a div or something similar. Any help is greatly appreciated.

$(document).ready(function() {
$('#signin').validate({
    rules: {
        email: {
            required: true,
            email: true
        },
        password:   {
            required: true,
            rangelength:[8,16]
        }
    },  //end rules
    messages: {
        email: {
            required: 'Required field',
            email: 'This is not a valid email address'
        },
        password: {
            required: 'Please type a password',
            rangelength: 'Password must be between 8 and 16 characters long.'
        }
    },//end messages
    errorPlacement: function(error, element) {
        if( element.is(':radio') || element.is(':checkbox')) {
            error.appendTo(element.parent());
        } else {
            error.insertAfter(element);
        }
    },//end errorPlacement
    showErrors: function(errorMap, errorList) {
        if (submitted) {
            var summary = "You have the following errors: \n";
            $.each(errorList, function() { summary += " * " + this.message + "\n"; });
            alert(summary);
            submitted = false;
        }
        this.defaultShowErrors();
    },          
    invalidHandler: function(form, validator) {
        submitted = true;
    }
});//end validate
}); // end ready

Answer 1

Adding value into a div is quite easy, your code is almost complete, you just need to create a div and insert the data to it:

HTML:

<div id="signin_errors" >errors will go here</div>
<br/>
<form id="signin" type="post" >
    email: <input id="email" name="email"/>
    <br/>
    pass: <input id="password" name="password"/>
    <input type= "submit"/>
</form>

JS:

$('#signin').validate({
    rules: {
        email: {
            required: true,
            email: true
        },
        password:   {
            required: true,
            rangelength:[8,16]
        }
    },  //end rules
    messages: {
        email: {
            required: 'Required field',
            email: 'This is not a valid email address'
        },
        password: {
            required: 'Please type a password',
            rangelength: 'Password must be between 8 and 16 characters long.'
        }
    },//end messages
    errorPlacement: function(error, element) {
        if( element.is(':radio') || element.is(':checkbox')) {
            error.appendTo(element.parent());
        } else {
            error.insertAfter(element);
        }
    },//end errorPlacement
    showErrors: function(errorMap, errorList) {
        if (submitted) {
            var summary = "You have the following errors: <br/>";
            $.each(errorList, function() { summary += " * " + this.message + "<br/>"; });
            $("#signin_errors").html(summary);
            submitted = false;
        }

        this.defaultShowErrors();
    },          
    invalidHandler: function(form, validator) {
        submitted = true;
    }
});//end validate

working fiddle