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