JQuery validate plugin does not hide <div> error after displaying it

Question

I searched and read (not only on SO), but could not find a solution to this problem. Basically, what happens is that the jQuery authentication plugin (according to the documentation) should hide the error container that is installed in its configuration. Unfortunately, he does not hide it, he simply deletes the contents.

To reproduce the problem, simply enter a non-email value in the box and click elsewhere on the page. An error message will appear. Now enter and delete values ​​and see what happens. The error message disappears, but the container is not hidden, and since it has a style (border / background / etc), it can be seen even after fixing the error.

Appropriate CSS for this div:

div#mailform div#error {
     font-size: 10px;
     width: 288px;
     text-align: center;
     display: inline;
     float: left;
     position: fixed;
     z-index: 1;
     padding: 2px;
     margin-left: 6px;
     background-color: #fcd6cf;
     border: 1px solid #bb1124;
     display: none;
}

jQuery, , , , ( , , , /):

$.fn.search = function() {
 return this.focus(function() {
  if( this.value == this.defaultValue ) {
   this.value = "";
  }
 }).blur(function() {
  if( !this.value.length ) {
   this.value = this.defaultValue;
  }
 });
};

$("#email").search();


$("#subscribeform").validate({
 errorContainer: "#error",
 errorLabelContainer: "#error",
 errorClass: "invalid",
 rules: {
  email: {
   email: true
  },
 },
 messages: {
  name: "Please specify your name",
  email: {
    email: "Please enter a valid email address."
  }
 }
});

validate: http://docs.jquery.com/Plugins/Validation/validate#toptions, errorContainer " . , errorContainer, ." ( ). !

, , , . , .

Answer 1

, div. , . :

HTML:

<form id="subscribeform" name="subscribeform" action="mailform.php" method="post">
    <div id="mailform">
        <div id="desc">Stay informed with the latest news from the Foundation: </div>     
        <input type="text" id="email" name="email" placeholder="Enter email address" value="Enter email address"/>
        <input type="image" src="images/sendbutton.jpg" id="sendbutton" name="sendbutton" />
    </div>
</form>

CSS

div.error { /* the .error class is automatically assigned by the plug-in */
     font-size: 10px;
     width: 288px;
     text-align: center;
     display: inline;
     float: left;
     position: fixed;
     z-index: 1;
     padding: 2px;
     margin-left: 6px;
     background-color: #fcd6cf;
     border: 1px solid #bb1124;
     display: none;
}

, , jQuery:

$("#subscribeform").validate({
    errorElement: "div",
    errorPlacement: function(error, element) {
        error.insertBefore($("#desc"));
    },
    rules: {
        email: {
            email: true
        },
    },
    messages: {
        name: "Please specify your name",
        email: {
            email: "Please enter a valid email address."
        }
    }
});

, !

---

EDIT

JSFiddle: http://jsfiddle.net/SvWJ3/