`

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函数
    },
 
然后试了一下,果然问题解决了!
分享到:
评论

相关推荐

    jquery验证插件Validator

    **jQuery验证插件Validator详解** jQuery Validator是一款广泛应用于前端开发中的强大验证插件,它能够帮助开发者轻松实现表单验证,提高用户体验,确保用户输入的数据符合预设的规则。这款插件是基于jQuery库构建...

    jquery validator js验证框架

    如果你需要对一组相关的表单元素进行集体验证,jQuery Validator提供了`groups`选项,允许你将多个验证规则合并为一个。 ### 7. 自定义验证方法 除了预定义的验证规则,开发者还可以添加自己的验证方法。这通常...

    jQuery validator addMethod 根据不同情况显示不同错误信息

    在JavaScript的世界里,jQuery是一个广泛使用的库,它简化了DOM操作、事件处理和Ajax交互等任务。jQuery Validation Plugin是jQuery的一个扩展,专门用于表单验证,帮助开发者创建强大的验证规则,提升用户体验。...

    jquery validator

    **jQuery Validator插件详解** jQuery Validator是一个非常实用的前端验证插件,它是jQuery库的一个扩展,主要用于表单验证。在Web开发中,特别是在用户交互频繁的网页应用中,确保用户输入的数据符合预设规则至关...

    jquery validator 插件增加日期比较方法

    jQuery Validator 插件是一个广泛使用的前端JavaScript验证库,它为开发人员提供了多种便捷的表单验证功能。随着项目需求的复杂化,仅仅使用内置验证规则往往不能满足所有场景,比如需要进行日期大小比较的场景。在...

    jquery_validator说明

    在使用 jQuery Validator 之前,首先需要确保已安装 jQuery 和 jQuery Validator 插件。以下为引入 jQuery 和 jQuery Validator 的示例代码: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery Validator 示例 &lt;!-- ...

    jquery validator api

    jQuery Validator API是一款基于jQuery的轻量级验证插件,它为开发者提供了方便、灵活且强大的表单验证功能。这个插件主要用于确保用户在提交表单时输入的数据符合预设的规则,从而提升用户体验,减少服务器端的压力...

    jquery表单验证插件Bootstrap Validator

    **jQuery表单验证插件BootstrapValidator详解** BootstrapValidator是一款基于jQuery和Bootstrap 3框架的高效、灵活的表单验证插件。它旨在提供一个简单易用的解决方案,帮助开发者实现对用户输入数据的有效性检查...

    ssh2 jQuery Validator验证重复添加

    jQuery的Validator插件是用于表单验证的工具,可以帮助开发者创建符合各种规则的表单输入验证,提高用户体验并减少服务器端的压力。 "ssh2 jQuery Validator验证重复添加"这个主题可能涉及到在使用jQuery Validator...

    jquery validator的实用

    在探讨`jQuery Validator`的实用性及其验证信息时,我们深入剖析了这一强大的前端表单验证插件如何通过一系列预定义的规则和自定义方法来确保数据的准确性和完整性。`jQuery Validator`是`jQuery`库的一个扩展,它极...

    bootstrapvalidator是一款简单实用的Bootstrap3表单验证jQuery插件

    BootstrapValidator是针对Bootstrap3框架的一款高效且易于使用的jQuery表单验证插件,它极大地简化了在Web应用中实现复杂表单验证的过程。这款插件利用HTML5的数据属性(data attributes)来设定验证规则,使得...

    validator jQuery表单验证插件

    插件描述:Validator是一个jQuery验证插件,可以验证文本,文本区,密码复选框并选择元素。验证器支持:需要依赖复选框,最小/最大长度、电子邮件、数量、数字和一些定位的错误消息

    jquery_validator

    学习jquery 时写的小东西,东西是好东西哦,比如checkdblength, checkstartdate,checkenddate ,您慢慢看,呵呵

    jquery 表单插件 formvalidator

    **jQuery FormValidator 插件详解** 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,从而提高数据质量和用户体验。jQuery FormValidator 是一个强大且灵活的验证插件,尤其适用于...

    jquery验证插件!

    在本文中,我们将深入探讨基于jQuery的验证插件及其在Web开发中的应用。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。验证插件是jQuery的一个扩展,用于实现表单数据验证,...

    自带丰富示例的jQuery验证表单插件

    jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。在Web开发中,表单验证是必不可少的一环,确保用户输入的数据符合预设规则。jQuery Validate插件就是为此目的而设计的,它为...

    bootstrapValidator表单验证插件

    BootstrapValidator是一款基于Bootstrap框架的强大的表单验证插件,它为开发者提供了丰富的验证规则和灵活的自定义选项,使得在Web应用中实现高效且用户体验优良的表单验证变得轻松便捷。这款插件不仅外观与...

    jquery验证插件 带文档 支持中文

    jQuery验证插件是一款广泛应用于前端开发中的工具,它极大地简化了网页表单验证的过程,使得开发者可以方便地为用户输入的数据添加各种验证规则。这款插件不仅具备丰富的验证功能,而且特别强调对中文的支持,这在...

    Jquery的表单插件

    此外,还可以与其他jQuery插件如Validator、AjaxQueue结合使用,构建更复杂的表单交互逻辑。 总的来说,jQuery Form插件是处理Web表单的强大工具,通过它我们可以轻松实现异步提交、文件上传等功能,为用户提供更加...

Global site tag (gtag.js) - Google Analytics