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 相关文章推荐
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
js实现小球在页面规定的区域运动
Jun 16 Javascript
如何用threejs实现实时多边形折射
May 07 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
javascript 闭包
2011/09/15 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
如何在python中使用selenium的示例
2017/12/26 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Python中的TCP socket写法示例
2018/05/11 Python
python版飞机大战代码分享
2018/11/20 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
Python datetime模块使用方法小结
2020/06/18 Python
python中K-means算法基础知识点
2021/01/25 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
兼职学生的自我评价
2013/11/24 职场文书
银行职业规划书范文
2013/12/28 职场文书
教师暑期培训感言
2014/08/15 职场文书
公务员处分决定书
2015/06/25 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
python blinker 信号库
2022/05/04 Python
python神经网络ResNet50模型
2022/05/06 Python