即使存在服务器消息消息,jQuery Validation也会隐藏错误容器,如何防止这种情况发生?

时间:2017-02-15 13:53:52

标签: jquery html jquery-validate

使用jquery validation包。

尝试登录失败后检查登录字段。错误容器有一条消息,指出失败的原因。凭证不匹配。

  • 输入错误的电子邮件格式:即。叔
  • 按Tab键删除焦点,电子邮件会显示格式错误的错误消息。
  • 填写此字段,test @ test.test,按标签
  • 错误消息消失。
  • 输入1个字符并按Tab键
  • 密码的服务器消息和错误消息不会出现8个字符。

也许我很挑剔,但我希望服务器错误仍然可见。让它消失并重新出现对我来说很麻烦。这怎么可能?

我正在阅读有关使用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;
&#13;
&#13;

0 个答案:

没有答案