jQuery validate plugin won't hide error <div> after displaying it

Question

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. (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 at: http://docs.jquery.com/Plugins/Validation/validate#toptions, 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.

Answer 1

What you're doing is inserting the error element into a pre-defined div. The error element is shown and hidden, but not the error element's parent. Try this instead:

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

And finally the 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."
        }
    }
});

Hope this helps !

---

EDIT

Here's a live JSFiddle example: http://jsfiddle.net/SvWJ3/