jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法


Posted in Javascript onDecember 24, 2016

下面搜集了五种方法,主要还是前两个提供了解决方案,第三种需要修改jQuery源码:

修复jquery.validate插件中name属性相同(如name='a[]‘)时验证的bug

使用jQuery.validate插件http://jqueryvalidation.org/,当节点的name相同时候,脚本特意忽略剩余节点,导致所有相关节点的errMsg都显示在第一个相关节点上。这个bug在动态生成表单时候影响比较大。

通过查询资料,找到一个解决方案:

http://stackoverflow.com/questions/931687/using-jquery-validate-plugin-to-validate-multiple-form-fields-with-identical-nam

具体内容为

$(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 () {
  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;
 });
 };
}
});

在页面上引入以上代码,然后给相关节点加上id属性,当name属性相同时候会以id属性来验证

-------------------------------------------------------------------------------------------

用下面这种方式应该能解决:(http://stackoverflow.com/questions/2589670/using-jquery-validate-with-multiple-fields-of-the-same-name)

$(function(){
 $("#myform").validate();
 $("[name=field]").each(function(){
 $(this).rules("add", {
 required: true,
 email: true,
 messages: {
  required: "Specify a valid email"
 }
 }); 
 });
});

----------------------------------------------------------------------------------

jquery.validate.js 相同name的多个元素只能验证第一个元素的解决办法

动态生成的相同name的元素验证只会取第一个.

很恼火的问题.只有将jquery.validate.js中的对相同name的元素判断注释掉.

但是不知道会不会引起其他地方的BUG

希望以后jquery.validate.js能做针对元素ID进行验证而不仅仅针对元素name验证.

方法:

将484行的代码注释掉即可

// select only the first element for each name, and only those with rules specified if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
 {
 return false; 
}

注释成

// select only the first element for each name, and only those with rules specified /*if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
 {
 return false;
 }
*/

-----------------------------------------------------------------------------------------------------------------------------------------

<html>
 <head>
 <link href="style.css" rel="stylesheet">
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#contact-form').validate();

$(":text").each( function(){ 
 $(this).rules( "add", {
 required:true,
 minlength: 2
 })
 });

});

</script>
 </head>
 <body>
 <form action="" id="contact-form" class="form-horizontal"> 
 <p>
 <input type="text" name="test_a" id="a"><br>
 <input type="text" name="test_a" id="b"><br>
 <input type="text" name="test_a" id="c"><br>
 <button type="submit" class="btn btn-primary btn-large">Submit</button>
 <button type="reset" class="btn">Cancel</button> 
 </form> 
 </body>
</html>

这个表单的input 是随机生成的,所以name都是相同的,我现在要用jquery.validate.js来验证输入,现在只校验了第一id=‘a' 的,怎么让我验证所有的?

你这么写其实是添加验证成功的了,验证会被执行,只是submit的时候不是你想要的效果。

你可以试试,输入第一个框后,在第二个框里点一下不输入再点到第三个框。
可以看到验证的逻辑被执行了。

分析一下原因:

 jquery.validate 这个插件在生成rules的时候是按name来生成的,也就是说,你的表单其实只添加了一条验证rule:就是对name=test_a的字段做非空和最小长度验证。

当输入框失去焦点时会触发这条规则,因为每个input的name都是test_a,可以命中rules中的规则

当submit的时候,同样会调用{'test_a': { required:true, minlength: 2}}这条规则, 只不过这条规则会被通过,因为已经有一个test_a字段达到了规则的要求。

追问

那怎么实现submit的时候全部校验呢?

回答

修改input的name, 动态生成不同的name

追问

我使用class的方式还是只检验一个啊?求解

回答

嗯,我也试了,是不行。所以建议修改name, 或者不用jq的插件
---------------------------------------------------------------------------------------------------------------------------------------------

function validate()
{
 var result=true;
 $("input[name='你定义的name']").each(
   function(){
   if($(this).val()=="")
      {
    alert("请输入");
    $(this).focus();
    result=false;
    return;
   } 
 }
);
 return result;
}

以上所述是小编给大家介绍的jQuery Validate验证表单时多个name相同的元素只验证第一个的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS、CSS加载中的小问题探讨
Nov 26 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
js上传图片预览的实现方法
May 09 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 #Javascript
js实现的xml对象转json功能示例
Dec 24 #Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 #Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 #Javascript
纯JS实现表单验证实例
Dec 24 #Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 #Javascript
JS绘制微信小程序画布时钟
Dec 24 #Javascript
You might like
用cookies来跟踪识别用户
2006/10/09 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
python re模块findall()函数实例解析
2018/01/19 Python
python生成圆形图片的方法
2020/03/25 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
大学生学年自我鉴定
2014/02/10 职场文书
《四季》教学反思
2014/04/08 职场文书
班主任评语大全
2014/04/26 职场文书
关于建议书的格式范文
2014/05/20 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
防震减灾主题班会
2015/08/14 职场文书
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS