I am currently working with the jQuery validation plugin, and I want to show only one error-message before the form itself. Right now the validation shows all the error-messages on top of each others as they stack up, as you can see in my live example:

http://timkjaerlange.com/foobar/stack-stuff/validate-test.html

This is my jQuery:

$(document).ready(function() {
  $("form").validate({
    rules: { // bunch of rules here, left out to keep it simple },
    messages: { // messages goes here },
    errorElement: 'div',
    errorClass: 'error',
    errorPlacement: function(error, element) {
      error.insertBefore('form'); // this is what I've got
      $('div').replaceWith(error); // trying to replace the prev error
    }
  });
});

Anybody know how to this? Is this the best way to show only one error-message?

Any help is highly appreciated.