验证错误消息在有效时不会隐藏 [英] 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('');
},

JSFiddle

这篇关于验证错误消息在有效时不会隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！