1、设置多tab页同时校验:

$("form").validate({ignore: ":hidden", ignore: ""});

由于使用多tab页时,会存在隐藏域,jquery validate默认是不对隐藏域校验的;以上参数便是加入对隐藏域的校验。

2、多tab页校验,会存在校验提示定位问题,即如果多个tab页同时有不满足校验时,如何实现自动跳转到不满足校验的tab页。思路:根据第一个不满足校验条件的元素所在tab页,查找其在所有tab中的排序位置,然后模拟对应位置的tab点击事件,参考代码:

$("form").validate({ignore: ":hidden",

           ignore: "",
             showErrors: function(errorMap,errorList) {

          //此方法处理所有不满足校验的元素
             var i = 0;
             for(var key in errorMap){
                //alert("属性:" + key + ",值:"+ errorMap[key]); 
                if(i == 0){

                // 所有tab页的内容域

                var conents =  $("div.tab_tontent > div");

                // 所有tab页头

                var tabs = $("div.tab_menu ul li");       
                    var index = conents.index(conents.has("[name='"+key+"']"));
                    tabs.eq(index).click();
                }
                i++;
             }
             this.defaultShowErrors();
            }

          });

  以上是在实际项目中使用jquery validate.js遇到的问题和处理方法,特别提醒下errorMap中存的是不满足校验的元素name和校验提示信息的键值对,为了更好的定位多tab页,各个元素的name要求尽量不相同。

jquery validate 之多tab页同时校验问题的更多相关文章

  1. 使用JQuery.Validate插件来校验页面表单有效性

    使用JQuery.Validate插件来校验页面表单有效性​1. [代码] 常见的注册表单元素 <form action="#" method="post" ...

  2. 利用jquery写的一个TAB页切换效果

    函数如下 /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == ...

  3. 使用CSS和jQuery实现tab页

    使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...

  4. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  5. 使用原生js与jQuery分别实现一个简单的tab页签

    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...

  6. JQuery动态添加多个tab页标签

    jQuery是一个兼容多浏览器的js库,核心理念是write less,do more(写的更少,做的更多),jQuery使用户能更方便地处理HTML documents.events.实现动画效果, ...

  7. Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    基于Bootstrap和JQuery实现动态打开和关闭tab页   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...

  8. jquery easyui 中tab页添加其他页面,href与content的用法与区别

    //tab页增加 function addPanel(name,url){ var dd = $('#tt').tabs('exists',name); if(dd){ $('#tt').tabs(' ...

  9. JQuery实现tab页

    用ul 和 div 配合实现tab 页 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="U ...

随机推荐

  1. 本地git仓库常用操作

    SSH配置: 本机创建SSH key $ ssh-keygen -t rsa -C "youremail@example.com" 将SSHkey添加到git仓库:id_rsa.p ...

  2. Some facts about topological sort

    Definition: a topological sort of a DAG G is a sort such that for all edge (i,j) in G, i precedes j. ...

  3. vue pm2守护进程

    Linux 创建一个.sh可执行脚本,例如hexo.sh 代码 12 #!/usr/bin/env bashhexo server 使用pm2 start hexo.sh执行脚本 Windows 创建 ...

  4. location 对象属性

    Location 对象属性 hash 返回一个URL的锚部分 host 返回一个URL的主机名和端口 hostname 返回URL的主机名 href 返回完整的URL pathname 返回的URL路 ...

  5. Redis基本操作-list

    Redis的5种数据结构:string.list.hash.set和zset; Redis 所有的数据结构都是以唯一的 key 字符串作为名称,然后通过这个唯一 key 值来获取相应的 value 数 ...

  6. iOS 真机调试 Xcode 显示 device Error: device unavailable

    一般来说有两个原因: 1. iphone没有加到test device里,将iphone的设备id加到test device列表里 2. Xcode不支持当前的iOS版本,将Xcode升级到最新版

  7. Python Env

    简介: 记录 CentOS 6.x Python 环境的安装步骤. 一.安装依赖包 shell > yum -y install epel-release shell > yum -y i ...

  8. <U+FEFF> character showing up in files. How to remove them?

    You can easily remove them using vim, here are the steps: 1) In your terminal, open the file using v ...

  9. oc 中的id类型与类型转换

    id是oc语言中一个独特的数据类型.一种通用对象类型.可以转换为任何数据类型,即id类型的变量可以存放任何数据类型的对象. 使用示例: Animal * dog = [[Dog alloc]init] ...

  10. 批量导入数据(Mysql)报MySQL server has gone away 问题的解决方法

    问题分析 首先度娘:mysql出现ERROR : (2006, 'MySQL server has gone away') 的问题意思就是指client和MySQL server之间的链接断开了. 造 ...