UPDATE 2: Я понял, что название входа почему-то отображается как сообщение об ошибке, я использовал ignoreTitle: правда, чтобы убедиться, что он заголовок не отображается как сообщение об ошибке.проверки Сообщение об ошибке не будет скрывать, когда действует
Однако теперь моя новая проблема в том, когда я печатаю действительный адрес электронной почты сообщение об ошибке все еще оленья кожа уходит.
Как я могу исправить сообщение об ошибке проверки, чтобы оно скрывалось, когда поле ввода является допустимым?
Я довольно новичок в проверке jQuery, и я не могу понять эту проблему. Любая помощь по этому вопросу была бы весьма признательна. Благодаря!
ОБНОВЛЕНО 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;
}
Я никогда не знал, что я должен был добавить функцию успеха в validation.Thank вы так много! – ChosenJuan