Multi tab page verification in jQuery validate

Time:2020-10-26

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

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

Since there will be hidden fields when using multi tab pages, jQuery validate does not check hidden fields by default; the above parameters are used to check hidden fields.

2. In multi tab page verification, there will be the problem of checking prompt location, that is, if multiple tab pages do not meet the verification at the same time, 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 ranking position in all tabs, and then simulate the tab click event at the corresponding position. Reference code:

$("form").validate({
    ignore: ":hidden",
    ignore: "",  
    showErrors: function(errorMap,errorList) {
        //This method handles all elements that do not meet the validation  
        var i = 0;  
        for(var key in errorMap){  
        //Alert ("attribute: + key +", value: + errormap \ [key \]);   
        if(i == 0){
            //Content fields for 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 is the use of jQuery in actual projects validate.js Problems encountered and processing methods. In particular, in the errormap, there are element names that do not meet the verification and key value pairs of verification prompt information. In order to better locate multi tab pages, the name requirements of each element should be as different as possible.