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 31 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
angular.bind使用心得
Oct 26 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
vue中v-model的应用及使用详解
Jun 27 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
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中实现可以返回多个值的函数实例
2015/03/21 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
vue实现登录拦截
2020/06/29 Javascript
在Django中创建第一个静态视图
2015/07/15 Python
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
Python实现某论坛自动签到功能
2019/08/20 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
计算机科学与技术应届生求职信
2013/11/07 职场文书
公司企业表扬信
2014/01/11 职场文书
单位创先争优活动方案
2014/01/26 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书