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

ゝ一世哀愁。 2021-06-26 16:06 155阅读 0赞

发现了`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`只会去校验一次 不会每一个同名的元素都回去校验!