Show only one validation error-message using replaceWith

Question

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 current 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
    }
  });
});

But I only want to show the latest error-message, so to replace the previous error with the next one I want to do something like this instead:

    errorPlacement: function(error, element) {
      $('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.

Answer 1

Sounds like a viable solution but replaceWith would replace the div with the error label and would fail on all subsequent calls as no div is found.

This should do it

$('div').empty().append(error);

---

Just a side note. This will probably lead to unwanted behavior. Just think what happens when e.g. 3 fields are invalid. 3 error labels are generated and you place them inside this even (overwriting each other). Thus only the last label is visible. But what happens when the user fixes the error shown? No error will be shown although 2 fields still are invalid.

Answer 2

Deal it as an presentation issue and just hide non-first error elements using CSS ;)