在使用Jquery validate中遇到一个问题,当表单元素有name相同字段时,validate只校验表单元素name第一个值是否通过校验,比如

<input type="text" name="userName"/>
<input type="text" name="userName"/>
<input type="text" name="userName"/>
<select name="favour"></select>
<select name="favour"></select>
<select name="favour"></select>

这时候,jquery validate,只会校验第一个元素,看了一下源码(https://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.js),是因为它在获取form元素时,做了一层cache处理。

elements: function() {
var validator = this,
rulesCache = {}; // Select all valid inputs inside the form (no submit or reset buttons)
return $( this.currentForm )
.find( "input, select, textarea, [contenteditable]" )
.not( ":submit, :reset, :image, :disabled" )
.not( this.settings.ignore )
.filter( function() {
var name = this.name || $( this ).attr( "name" ); // For contenteditable
if ( !name && validator.settings.debug && window.console ) {
console.error( "%o has no name assigned", this );
} // Set form expando on contenteditable
if ( this.hasAttribute( "contenteditable" ) ) {
this.form = $( this ).closest( "form" )[ 0 ];
this.name = name;
} // Select only the first element for each name, and only those with rules specified,缓存判断
if ( name in rulesCache || !validator.objectLength( $( this ).rules() ) ) {
return false;
}
// 在这里做了一层Cache,如果下次再来相同的Name,则不会再进入validate的校验List
rulesCache[ name ] = true;
return true;
} );
},

解决办法

1. 我们可以更改源码cache的key的名字或者在Jquery页面load完毕后,修改property上的validate原型方法,它使用name可能会造成这种bug,那我们使用Id,一般Id是不会重复的,如果Id不存在,我们再使用name来做为cache的key,简单来说,就是一行代码

var name = this.id || this.name || $( this ).attr( "name" ); // For contenteditable

比原有的

var name = this.name || $( this ).attr( "name" ); // For contenteditable

多了一个 this.id 判断。

2. 页面加载完成后修改的方式:

$(function() {
if ($.validator) {
//fix: when several input elements shares the same name, but has different id-ies....
$.validator.prototype.elements = function() {
var validator = this,
rulesCache = {};
// select all valid inputs inside the form (no submit or reset buttons)
// workaround $Query([]).add until http://dev.jquery.com/ticket/2114 is solved
return $([]).add(this.currentForm.elements).filter(":input").not(":submit, :reset, :image, [disabled]").not(this.settings.ignore).filter(function() {
// 这里加入ID判断
var elementIdentification = this.id || this.name; ! elementIdentification && validator.settings.debug && window.console && console.error("%o has no id nor name assigned", this);
// select only the first element for each name, and only those with rules specified
if (elementIdentification in rulesCache || !validator.objectLength($(this).rules())) return false;
rulesCache[elementIdentification] = true;
return true;
});
};
}
});

记得给你name相同的表单元素添加id哦~

参考:http://www.jb51.net/article/101085.htm

JqueryValidate表单相同Name不校验问题解决的更多相关文章

  1. JqueryValidate 表单验证插件

    1.适用场景 表单 ( 支持自定义规则 ) 2.相关文章 jQuery Validate 3.实际问题 JqueryValidate表单相同Name不校验问题解决

  2. jQuery Validate 表单验证插件----自定义校验结果样式

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  3. 微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装(一)

    在做web开发时,表单验证插件我们前端用的是jqueryValidate,由于个人主要精力是在后台JAVA开发上,为了让插件与后台更好的结合和使用,通过JAVA的自定义组件将表单全部重新写了一边,同时 ...

  4. 在表单提交之前做校验-利用jQuery的submit方法

    点击表单中的提交按钮,默认就会提交表单,如果要在表单提交之前做一些校验,那么就可以用jQuery的submit方法. 也就是jQuery的submit的方法执行顺序,在表单的提交之前.用法如下: $( ...

  5. 【PHP】(原创)之表单FORM的formhash校验,以TP3.2示例

    1.目的:每次表单POST提交(ajax的POST也适用)过来数据,都必须校验formhash参数是否和服务器端的一致,不一致说明重复提交或者 跨站攻击提交csrf 2.原理:参照了 KPPW 的fo ...

  6. Jquery Validate表单验证,自定义校验正整数

    // 添加自定义校验规则,校验正整数 jQuery.validator.addMethod("positiveinteger", function(value, element) ...

  7. 优化表单数据的JS校验

    在平常的web开发中,我经常需要在客户端对表单的数据进行验证.比如,我们验证表单输入的内容不为空: ? <form action="" method="post&q ...

  8. html 表单input录入内容校验

    <p>文本框只能输入数字代码(小数点也不能输入)</p><input onkeyup="this.value=this.value.replace(/\D/g, ...

  9. 一个简单的jquery ajax表单提交 带数据校验 layer弹框提示

    <input type="hidden" id="url" value="index.php"/> <form id=&q ...

随机推荐

  1. 何时调用C++复制构造函数和拷贝构造函数(转)

    1. 何时调用复制构造函数 复制构造函数用于将一个对象复制到新创建的对象中.也就是说,它用于初始化过程中,而不是常规的赋值过程中.类的复制构造函数原型通常如下: class_name(const cl ...

  2. 【DevOps】谁说大象不能跳舞?

    作者:范军 (Frank Fan) 新浪微博:@frankfan7   微信:frankfan7 很多企业,尤其是大企业在产品开发和运维上存在着一些普遍问题,比如开发周期长.人员合作程度不高.开发和运 ...

  3. InnoDB 与 MYISAM

    http://www.cnblogs.com/sopc-mc/archive/2011/11/01/2232212.html

  4. javascript:addEventListener

    addEventListener 用于注册事件处理程序,IE 中为 attachEvent,我们为什么讲 addEventListener 而不讲 attachEvent 呢?一来 attachEve ...

  5. 咏南中间件开始支持redis client接口调用

    咏南中间件开始支持redis client接口调用 咏南中间件封装了redis client接口,可以支持REDIS了. 如下图,将数据集写入REDIS缓存,和从REDIS缓存获取数据: proced ...

  6. iOS内存管理策略和实践

    转:http://www.cocoachina.com/applenews/devnews/2013/1126/7418.html 内存管理策略(memory Management Policy) N ...

  7. C#编程(七十四)----------释放非托管资源

    释放非托管资源 在介绍释放非托管资源的时候,我觉得有必要先来认识一下啥叫非托管资源,既然有非托管资源,肯定有托管资源. 托管资源指的是.net可以自棕进行回收的资源,主要是指托管堆上分配的内存资源.托 ...

  8. C#编程小结----集合的小小总结

    集合的小结 以上文章介绍了如何处理不同类型的集合,数组的大小是固定的,但可以使用列表作为动态增长的集合.队列以先进先出的方式访问元素.栈以后进先出的方式访问元素.链表可以快速的插入和删除元素,但搜索操 ...

  9. C#输出到Release VS中Release模式下生成去掉生成pdb文件

    Release 与 Debug 的区别就不多说了, 简单来说 Release 优化过, 性能高一些. Debug 为方便调试. 默认情况下是 Debug, 那如何改成 Release 呢? 项目上右键 ...

  10. 【Devops】【docker】【CI/CD】jenkins 清除工作空间报错Error: Wipe Out Workspace blocked by SCM

    jenkins 清除工作空间报错 错误如下: Error: Wipe Out Workspace blocked by SCM 解决方法: 进入jenkins服务器,进入workspace,手动rm ...