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 常用关键字列表集合
Dec 04 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
jQuery each函数源码分析
May 25 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
简单了解JavaScript异步
May 23 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 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 - Html Transfer Code
2006/10/09 PHP
无限级别菜单的实现
2006/10/09 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
Smarty3配置及入门语法
2017/02/22 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
python查看zip包中文件及大小的方法
2015/07/09 Python
Python实现通讯录功能
2018/02/22 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Python分类测试代码实例汇总
2020/07/23 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
数学专业推荐信范文
2013/11/21 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
Redis如何实现分布式锁
2021/08/23 Redis
基于Redission的分布式锁实战
2022/08/14 Redis