jQuery validate plugin won't hide error <div> after displaying it
I've searched and read (not just on SO) but can't seem to find a solution for this issue. Basically, what is happening is that the jQuery validate plugin is (according to documentation) supposed to hide the errorContainer that is set in its configuration. Unfortunately, it's not hiding it, it's just removing the contents.

Please take a look at the [page I'm working on][1]. (The form is not doing anything at the moment, other than submitting to itself).

In order to reproduce the issue, just enter a non-email value in the the field and click somewhere else on the page. You should see the error message appear. Now go in and delete the values, and watch what happens. The error message disappears but the container is not hidden, and since it is styled (border/background/etc) it can still be seen even after the error has been corrected.

The relevant 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;
    }

The jQuery I'm using, including another function I'm using to deal with the field's default value (already tested disabling the other function to see if that was interfering with the show/hide):

    $.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."
      }
     }
    });
  
According to the validate plugin documentation (http://docs.jquery.com/Plugins/Validation/validate#toptions -- I'm new so I can't post more than one link), the errorContainer parameter "Uses an additonal container for error messages. **The elements given as the errorContainer are all shown and hidden when errors occur.**" (My emphasis). But that's obviously not happening!
 
So I'm puzzled, and eager to find out what's going wrong with my code so that I can get past this and whip up the PHP side of it. Thanks in advance for reading and for any help you guys can give.

  [1]: http://j.mp/jqverify
jQuery validate plugin won't hide error <div> after displaying it
===

I've searched and read (not just on SO) but can't seem to find a solution for this issue. Basically, what is happening is that the jQuery validate plugin is (according to documentation) supposed to hide the errorContainer that is set in its configuration. Unfortunately, it's not hiding it, it's just removing the contents.

Please take a look at the [page I'm working on][1]. (The form is not doing anything at the moment, other than submitting to itself).

In order to reproduce the issue, just enter a non-email value in the the field and click somewhere else on the page. You should see the error message appear. Now go in and delete the values, and watch what happens. The error message disappears but the container is not hidden, and since it is styled (border/background/etc) it can still be seen even after the error has been corrected.

The relevant 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;
    }

The jQuery I'm using, including another function I'm using to deal with the field's default value (already tested disabling the other function to see if that was interfering with the show/hide):

    $.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."
      }
     }
    });
  
According to the validate plugin documentation (http://docs.jquery.com/Plugins/Validation/validate#toptions -- I'm new so I can't post more than one link), the errorContainer parameter "Uses an additonal container for error messages. **The elements given as the errorContainer are all shown and hidden when errors occur.**" (My emphasis). But that's obviously not happening!
 
So I'm puzzled, and eager to find out what's going wrong with my code so that I can get past this and whip up the PHP side of it. Thanks in advance for reading and for any help you guys can give.

  [1]: http://j.mp/jqverify