验证错误消息在有效时不会隐藏

Question

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.

但是， 现在我的新问题是，一旦我输入了一个有效的电子邮件地址，错误消息仍然没有消失。

如何修复我的验证错误消息，使其在输入字段有效时隐藏？

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

Answer 1

您必须将 success 函数添加到验证中：

success: function(label,element) {
   $(".myerror").html('');
},

JSFiddle

Answer 2

只需注释 errorplacement 选项，它就会按要求工作。

$(".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."          
                }

    }

});

已更新 fiddle - http://jsfiddle.net/psbq8vkj/11/

验证错误消息在有效时不会隐藏

Validation Error Message won't hide when valid

html

css

jquery

jquery-validate

jquery-validation-engine