jquery validate multiple tab pages simultaneously verify the problem

Posted Jun 16, 20201 min read

  1. Set multiple tab pages to verify at the same time:

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

Because there are hidden fields when using multiple tab pages, jquery validate does not verify hidden fields by default; the above parameters are added to verify hidden fields.

  1. Multi-tab page verification, there will be a verification prompt positioning problem, that is, if multiple tab pages simultaneously fail to meet the verification, how to automatically jump to the tab page that does not meet the verification. Idea:According to the tab page where the first element that does not meet the verification condition is located, find its sorted position in all tabs, and then simulate the tab click event of the corresponding position, reference code:

    $("form").validate({

     ignore:":hidden",
     ignore:"",
     showErrors:function(errorMap,errorList) {
         //This method handles all elements that do not satisfy the check
         var i = 0;
         for(var key in errorMap){
         //alert("attribute:" + key + ", value:"+ errorMap\[key\]);
         if(i == 0){
             //Content fields of all tab pages
             var conents = $("div.tab\_tontent> div");
             //all tab headers
             var tabs = $("div.tab\_menu ul li");;
             var index = conents.index(conents.has("\[name='"+key+"'\]"));
             tabs.eq(index).click();
         }
         i++;
      }
      this.defaultShowErrors();
     }

    });

The above are the problems and processing methods encountered in the actual project using jquery validate.js, especially reminded that the errorMap contains the key-value pairs of the element name and verification prompt information that do not meet the verification, in order to better locate Tab page, the name requirements of each element are as different as possible.