尝试登录失败后检查登录字段。错误容器有一条消息,指出失败的原因。凭证不匹配。
也许我很挑剔,但我希望服务器错误仍然可见。让它消失并重新出现对我来说很麻烦。这怎么可能?
我正在阅读有关使用invalidHandler
函数的内容,但由于我配置了errorContainer
,因此代码永远不会达到这一点。
PS真的很喜欢你可以使用运行代码段中的console.log进行调试
$(document).ready(function(){
$("#login-form").validate({
rules: {
username:{
required:true,
normalizer:function(value){
return $.trim(value);
},
email:true,
},
password:{
required:true,
normalizer:function(value){
return $.trim(value);
},
minlength:8
},
},
errorContainer: "#errorMessageContainer",
errorLabelContainer: "#errorMessageContainer ul",
errorElement: "li",
messages: {
username:{
required:"Email cannot be left empty",
email:"Must be an Email address"
},
password: {
required: "Password Cannot Be Left Empty",
minlength: "Password must contain 8 characters"
}
}
,
invalidHandler: function(form, validator) {
//Can something be done here?
console.log('invalidContainer');
},
submitHandler:
function(form) {
form.submit();
}
});
displayErrorContainer();
});
function displayErrorContainer(){
var child = $("#errorMessageContainer").children("ul").html();
console.log('ftn: msg displayErrorContainer:'+child);
if(typeof child !== "undefined" && child.length > 0){
//console.log("show the error-container");
$("#errorMessageContainer").show();
}else{
//console.log("hide the error-container");
$("#errorMessageContainer").hide();
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<div id="errorMessageContainer">
<ul><li>Username and Password do not match</li></ul>
</div>
<form id="login-form" request="POST">
<input id="username" name="username" type="text" />
<input id="password" name="password" type="password" />
<button type="submit">Submit</button>
</form>
&#13;