jQuery validator插件success设置为function进行removeClass操作的BUG修复

发现了jQuery Validation Pluginv1.13.1有一个小BUG。

需求实现是：一个输入框验证不通过错误提示信息显示在label中，此时使用.error样式。当验证通过，通过设置option中的success为function来操作，remove掉.error样式，add上.valid样式。

可是发现如果在验证通过的情况下，不停地在输入框中onblur，那么会不停地新增显示错误信息的label，导致不停新增验证通过的样式。

直接提交，验证不通过，正常

填写一个正确格式的手机号码，正常

然后手贱，在手机号码的输入框中做了几次onblur操作，尼玛！！！坑爹呢这是？？！！

我设置success的代码好简单的啊，这就挂了？！！

success: function (error, element) {     
    error.removeClass("error").addClass("valid");
}

然后没辙，只能翻大神的源码看了。后来发现问题出现在以下errors函数的代码上：

errors: function() {
	var errorClass = this.settings.errorClass.split( " " ).join( "." );
	return $( this.settings.errorElement + "." + errorClass, this.errorContext );
},

可以看出，这个函数拿error的显示元素（就是errorElement）就是使用.error进行抓取，但是，我的代码操作时候已经将.error去除了。为什么去除？因为已经验证通过了，不想label里面还有一个.error样式啊

那么errors没有抓到显示错误的元素会怎样，当然是创建一个了。那么问题找到了，我改了两处来处理这种情况

1.修改errors函数，让他通过id属性来抓取显示错误的元素

errors: function( element ) {
    return $( this.settings.errorElement + "#" + this.idOrName(element) + "-error", this.errorContext );
},

之所以敢大胆地使用ID属性来抓取显示错误元素，是因为源码中创建这个元素是都会必定添加ID，不信？看源码：

showLabel: function( element, message ) {
    var place, group, errorID,
        error = this.errorsFor( element ),
	elementID = this.idOrName( element ),
	describedBy = $( element ).attr( "aria-describedby" );
    if ( error.length ) {
	// refresh error/success class
	error.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
	// replace message on existing label
	error.html( message );
    } else {
	// create error element
        error = $( "<" + this.settings.errorElement + ">" )
		.attr( "id", elementID + "-error" ) //看到了没看到了没？
		.addClass( this.settings.errorClass )
		.html( message || "" );

        ......
 

只要你不手贱改源码这段代码使用ID抓取errorElement肯定没事

2.修改调用errors的调用，将当前校验的element当做参数传入

errorsFor: function( element ) {
    var name = this.idOrName( element ),
	describer = $( element ).attr( "aria-describedby" ),
	selector = "label[for='" + name + "'], label[for='" + name + "'] *";

	// aria-describedby should directly reference the error element
	if ( describer ) {
	    selector = selector + ", #" + describer.replace( /\s+/g, ", #" );
	}
        return this.errors( element ).filter( selector );// 将element当做参数传入errors函数
    },

然后试了一下，果然问题解决了！

---

记录一下开发过程中使用jq写页面遇到的坑以及validate校验框不去除的问题记录一下使用jq写页面的遇到的坑

1、JQ的id选择器无法获取到id拼接了[ ]符号无法获取到元素
2、jq validate先校验失败后校验成功 但叫校验框没有去除的问题

详细情况与原因

首先是第一个问题 我写页面的时候因为页面有数据要封装进一个list发送到后台所以在写页面的时候 id 使用的是 xx[]

然后发现我写的js还有使用的分页插件一直不正确分页插件获取查询form中的对象但是在请求中却并没有发送这些对象,后面经过排查发现就是id拼接上了[] 使用$("#xx[]") 选择器时并没有获取到想要的元素.

然后是第二个问题 也是因为第一个问题埋下的坑
我在给页面的输入框加上校验时 发现有一个textarea检验失败之后再校验成功校验提示框并没有去除 .经过我在validate.js中断点排查 ,我发现validate每次校验的时候 都会去调用一个showLabe()的方法如果是fail 就会显示一个错误提示框 , 如果校验成功的话 他会去调用success()方法去除样式以及tip框.然后去除框就是根据生成的label去选择的 label的选择器用的是 输入框的id 拼上 -error 那么之前埋下的坑就出现了 我id也拼接上了[] 那么他在获取label的时候用的选择器时 $("#xx[]-error"),所以选择器获取不到对应的label 当然隐藏不了校验框

另外还有一个问题这里也记录一下 找资料的时候刚好看到
validate在校验form表单中的元素时,如果name相同的元素 validate只会去校验一次 不会每一个同名的元素都回去校验!