JQuery重复校验导致出现双重提示的问题记录
一、背景
最近在用JQuery Validate做表单校验时,由于需要校验用户名:1、是否符合注册规则;2、是否为空;3、是否已被注册;4、是否包含特殊字符,但问题来了,第一次点击是校验非空,但输入非法的用户名后会提示不符合注册规则,遂将其删掉,这时便出现了所述问题:既校验了非空,又校验了注册规则。
二、解决办法
其实解决方案也是比较简单,就是在新输入时将上一次的错误校验清除掉再对输入的内容进行重新校验,不管前面输入的内容是否有误,这样就能保持同时只校验一项内容。
三、代码示例
$("#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'); } }); });