JqueryValidate表单相同Name不校验问题解决
在使用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不校验问题解决的更多相关文章
- JqueryValidate 表单验证插件
1.适用场景 表单 ( 支持自定义规则 ) 2.相关文章 jQuery Validate 3.实际问题 JqueryValidate表单相同Name不校验问题解决
- jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- 微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装(一)
在做web开发时,表单验证插件我们前端用的是jqueryValidate,由于个人主要精力是在后台JAVA开发上,为了让插件与后台更好的结合和使用,通过JAVA的自定义组件将表单全部重新写了一边,同时 ...
- 在表单提交之前做校验-利用jQuery的submit方法
点击表单中的提交按钮,默认就会提交表单,如果要在表单提交之前做一些校验,那么就可以用jQuery的submit方法. 也就是jQuery的submit的方法执行顺序,在表单的提交之前.用法如下: $( ...
- 【PHP】(原创)之表单FORM的formhash校验,以TP3.2示例
1.目的:每次表单POST提交(ajax的POST也适用)过来数据,都必须校验formhash参数是否和服务器端的一致,不一致说明重复提交或者 跨站攻击提交csrf 2.原理:参照了 KPPW 的fo ...
- Jquery Validate表单验证,自定义校验正整数
// 添加自定义校验规则,校验正整数 jQuery.validator.addMethod("positiveinteger", function(value, element) ...
- 优化表单数据的JS校验
在平常的web开发中,我经常需要在客户端对表单的数据进行验证.比如,我们验证表单输入的内容不为空: ? <form action="" method="post&q ...
- html 表单input录入内容校验
<p>文本框只能输入数字代码(小数点也不能输入)</p><input onkeyup="this.value=this.value.replace(/\D/g, ...
- 一个简单的jquery ajax表单提交 带数据校验 layer弹框提示
<input type="hidden" id="url" value="index.php"/> <form id=&q ...
随机推荐
- 如何修改vs2010中html的默认模板
用vs2010开发,新建html时,html页面会生成HTML 4 XHTML的header,下面介绍一下如何把它改成干净的html5风格 百度经验:jingyan.baidu.com 工具/原料 v ...
- LightOJ 1366 - Pair of Touching Circles (统计矩形内外切圆对)
1366 - Pair of Touching Circles PDF (English) Statistics Forum Time Limit: 3 second(s) Memory Limi ...
- EZ1105
http://www.godexintl.com/cn/product/type/model/EZ1105
- SpringBoot打jar包问题
原文:https://jingyan.baidu.com/article/6f2f55a11d6e09b5b93e6c9e.html 当你使用springBoot进行打包的时候,这篇经验会帮助到你的. ...
- 【C++】拷贝构造函数和赋值符函数
在C++中,调用拷贝构造函数有三种情况: 1.一个对象作为函数参数,以值传递的方式传入函数体. 2.一个对象作为函数返回值,以值传递的方式从函数返回. 3.一个对象用于给另外一个对象进行初始化(复制初 ...
- 架构:Eventually Consistent - Revisited
原文地址:http://i.cnblogs.com/EditPosts.aspx?opt=1. I wrote a first version of this posting on consisten ...
- 使用 ssh -R 建立反向/远程TCP端口转发代理
转自:https://yq.aliyun.com/articles/8469 ssh是一个非常棒的工具, 不但能建立动态转发, 例如chrome的Switchy插件用到的就是这个技术.http://b ...
- epoll的两种工作模式
epoll有两种模式,Edge Triggered(简称ET) 和 Level Triggered(简称LT).在採用这两种模式时要注意的是,假设採用ET模式,那么仅当状态发生变化时才会通知,而採用L ...
- ExtJS 4.2 教程-01:Hello ExtJS
转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-1-hello-extjs, 本文还发布在了ExtJS教程网站起飞网上面,如果转载请保留本段声明,谢谢合作 ...
- 关于Spring-Data-Jpa的一些理解
spring data jpa介绍 首先了解JPA是什么? JPA(Java Persistence API)是Sun官方提出的Java持久化规范.它为Java开发人员提供了一种对象/关联映射工具来管 ...