Validation Error Message won't hide when valid

Question

UPDATE 2: I figured out that the title of the input was for some reason being displayed as an error message, I used ignoreTitle: true to make sure he title was not being displayed as an error message.

However, now my new problem is once I type a valid email address the error message still doesnt go away.

How can I fix my validation error message so that it hides when the input field is valid?

I'm fairly new to jQuery Validation, and I can't seem to figure this problem out. Any help on this matter would be greatly appreciated. Thanks!

UPDATED FIDDLE 2: http://jsfiddle.net/psbq8vkj/9/

JQUERY:

$(".guestlist-form").validate({
ignoreTitle: true,
    errorClass: "error-class",
    validClass: "valid-class",  
    rules: {
            emailaddress: {
                required: true,
                email: "Please enter your correct email address."
            }
    },
  errorPlacement: function(error, element) {
    $(".myerror").html('');  // clears previous error messages
    error.appendTo( ".myerror");
  },

   messages: {       
    emailaddress: {
                required: "Please enter your full email address."           
            }     
    }
 });

HTML:

<div id="updates" class="container-fluid">
    <center>
        <div class="title"><br />
            <span class="signuptitle">Sign up to our daily newsletter.</span><br/>
        </div>
        <div class="guestlist">       
            <form class="guestlist-form" action="email.php" method="post"> 
                <input name="emailaddress" type="email" class="guestlistfield" title="Enter your Email Address Here" placeholder="Enter your Email" /> 
                <input class="button" title="Join" type="submit" value="Sign up">
            </form>
        </div>
        <div class="myerror" style="margin-top:-20px;"></div>                       
    </center>
 <br><br>
</div>

CSS:

@media (min-width:959px) { 


.error-class {
     font-size:20px;  text-shadow:0.7px 0.7px #000;
}


.sociallogo {display:block; display:inline-block;}

.sociallogosmall {display:none;}

.feedback {
font-size:25px;  font-weight:bold; margin-top:0px; text-shadow:1px 1px #000;
}

}



@media (max-width:958px) { 

.sociallogo {display:none;}

.error-class {
     font-size:17px; text-shadow:0.7px 0.7px #000;
}


.sociallogosmall {display:block; display:inline-block;}


}



 .icongroup {margin-top:40px;}

.point {vertical-align:middle; }

@media (max-width:545px) {

    .point {display: block; margin: 0 auto;}

    .icongroup {text-align: center;}

    .error-class {
     font-size:15px; text-shadow:0.4px 0.4px #000;
}

   #error-message {margin-top:-10px;}



}




#yourmessage.error-class {margin-top:14px;}



.error-class {
    color:red;  z-index:1; 
}

.guestlist-form.error-class {
    color:red;  z-index:1;
}

.guestlistfield.error-class {
   position:relative; display:inline-block;
}

.guestlist-form .button {
   position:relative; z-index:2;
}



input.error-class { border:3px solid red;}

input.error-class:focus { border:3px solid #f90;}

.valid-class {
    color:black;
}

.emailaddress:focus, textarea:focus {
    border:3px solid #f90;
}

.guestlistfield:focus, textarea:focus {
    border:3px solid #f90;
}

Answer 1

You have to add the success function to the validation :

success: function(label,element) {
   $(".myerror").html('');
},

JSFiddle