验证错误消息在有效时不会隐藏 [英] Validation Error Message won't hide when valid
问题描述
UPDATE 2:我发现输入的标题是出于某种原因显示为错误消息,我使用 ignoreTitle:true ,以确保标题没有显示为错误消息。
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.
如何修正我的验证错误讯息,以便在输入栏位有效时隐藏?
我对jQuery Validation很新,我似乎不能把这个问题搞清楚。任何帮助,这个问题将非常感谢。谢谢!
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!
更新的FIDDLE 2:
http:/ /jsfiddle.net/psbq8vkj/9/
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;
}
推荐答案
code>成功函数进行验证:
You have to add the success
function to the validation :
success: function(label,element) {
$(".myerror").html('');
},
这篇关于验证错误消息在有效时不会隐藏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!