JQuery反復検査による二重提示の問題記録

2267 ワード

一、背景


最近JQuery Validateでフォームチェックをする時、ユーザー名をチェックする必要があるため:1、登録規則に合うかどうか;2、空かどうか;3、登録されているかどうか.4、特殊文字が含まれているかどうか、しかし問題が来て、初めてクリックするのは検査が空ではありませんが、不正なユーザー名を入力すると登録規則に合わないことを提示して、それを削除して、この時に上述の問題が現れました:非空を検査して、また登録規則を検査しました.
 

二、解決方法


実は解決策も比較的簡単で、新しい入力時に前回のエラーチェックをクリアしてから入力した内容を再チェックし、前に入力した内容が間違っているかどうかにかかわらず、同時に1つの内容だけをチェックすることができます.
 

三、コード例

$("#submitFormId").validate({
	onkeyup : false,
	//errorClass : "errormessage",
	//errorClass : 'error',
	//validClass : 'valid',
	errorClass: 'error',
	validClass: 'valid',
	onfocusout: function(element){
	var elem = $(element);
	elem.valid();
	},
	success : function(element) {
	//alert(element.attr("id"));
		//$.noop;
		var elem = $(element);
		elem.poshytip('disable');
		elem.poshytip('destroy');
	},
	errorPlacement : function(error, element){
		var elem = $(element);
        //         
		elem.poshytip('disable');
		elem.poshytip('destroy');
		//

        if (!error.is(':empty')) {
			// :x=right;y=center 
			// :x=left;y=center 
			// :x=inner-left 
			// :x=center;y=bottom 
			var aX = "right";
			if (elem.attr("positionX") != null) {
				aX = elem.attr("positionX");
			}
			var aY = "center";
			if (elem.attr("positionY") != null) {
				aY = elem.attr("positionY");
			}
			if("SELECT"==elem.get(0).tagName){
			elem.filter(':not(.valid)').poshytip({
			   showTimeout: 0,
				showOn : 'none',
				content : error,
				alignTo : 'target',
				alignX : aX,
				alignY : aY,
				offsetX : 5,
				offsetY : 5
			});
			}else{
			  elem.filter(':not(.valid)').poshytip({
			   showTimeout: 0,
				showOn : 'hover',
				content : error,
				alignTo : 'target',
				alignX : aX,
				alignY : aY,
				offsetX : 5,
				offsetY : 5 
				});
			}
		} else {
			elem.poshytip('disable');
			elem.poshytip('destroy');
		}
	},

	highlight:function(element, errorClass, validClass) {
		$(element).removeClass('valid').addClass('error');
	}

});
});