jquery validate 之多tab页同时校验问题

时间:2022-11-24 00:17:21

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要求尽量不相同。