UPDATE 2: Ich habe herausgefunden, dass der Titel der Eingabe aus irgendeinem Grund als Fehlermeldung angezeigt wurde. Ich habe @ verwendeignoreTitle: true, um sicherzustellen, dass der Titel nicht als Fehlermeldung angezeigt wird.

Jedoch Jetzt ist mein neues Problem, sobald ich eine gültige E-Mail-Adresse eingebe, wird die Fehlermeldung immer noch nicht ausgeblendet.

Wie kann ich meine Überprüfungsfehlermeldung so korrigieren, dass sie ausgeblendet wird, wenn das Eingabefeld gültig ist?

Ich bin ziemlich neu bei jQuery Validation und kann dieses Problem nicht herausfinden. Jede Hilfe in dieser Angelegenheit wäre sehr dankbar. Vielen Dank

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