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. Genymotion——VirtualBox cannot start virtual device

    提示"VirtualBox cannot start virtual device" 打开VirtualBox,想要在里面直接启动Genymotion模拟器,又出现错误,提示“Un ...

  2. VBA 语句集400句

    定制模块行为(1) Option Explicit '强制对模块内所有变量进行声明    Option Private Module '标记模块为私有,仅对同一工程中其它模块有用,在宏对话框中不显示  ...

  3. UI5-文档-4.20-Aggregation Binding

    现在我们已经为我们的应用建立了一个良好的结构,是时候添加更多的功能了.通过添加一些JSON格式的发票数据,我们开始探索数据绑定的更多特性,这些发票数据显示在面板下面的列表中. Preview A li ...

  4. UI5-文档-4.8-Translatable Texts

    在这一步中,我们将UI的文本移动到一个单独的资源文件中. 这样,他们都在一个中心位置,可以很容易地翻译成其他语言.这个国际化过程(简称i18n)是在SAPUI5中通过使用一种特殊的资源模型和标准的数据 ...

  5. ncodeURIComponent() 函数 vue内容

    ncodeURIComponent() 函数 编辑 encodeURIComponent() 函数[1]  作用:可把字符串作为URI 组件进行编码.其返回值URIstring 的副本,其中的某些字符 ...

  6. MeToo, one year on

    表示转折/让步关系:but, however, nevertheless, whereas, although, despite, in spite of, still 表示比较或对比关系:simil ...

  7. Session保存数据

    int nameid=dao.isLegalUser(name, password);/ /方法返回int数据               request.setAttribute("nam ...

  8. jsp 不显示换行 Eclipse复制一行快捷键

    jsp通过out.println();不能换行.html中需要标签<br/>才可以 Eclipse 复制整行代码移动:Ctrl+Alt+↑/↓.但是跟系统屏幕上下切换冲突,可以选择,在电脑 ...

  9. Zabbix安装(server和agent)及基本配置

    简介 zabbix([`zæbiks])是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制 ...

  10. 单点登录(SSO)解决方案之 CAS客户端与Spring Security集成

    接上篇:单点登录(SSO)解决方案之 CAS服务端数据源设置及页面改造 Spring Security Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制 ...