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 相关文章推荐
JavaScript 常用函数库详解
Oct 21 Javascript
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
JS的数组迭代方法
Feb 05 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
Node.js Express安装与使用教程
May 11 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
javascript事件监听与事件委托实例详解
Aug 16 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
php 文件上传实例代码
2012/04/19 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
JavaScript表单常用验证集合
2008/01/16 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python常用知识点汇总
2016/05/08 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
如何运行带参数的python脚本
2019/11/15 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
python中re模块知识点总结
2021/01/17 Python
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
供货协议书范本
2014/04/22 职场文书
幼儿生日活动方案
2014/08/27 职场文书
应聘教师自荐信
2015/03/26 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
介绍信格式样本
2015/05/05 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server