I have 2 tabs and each has few form elements in it (text box, radio etc.) I am validating some of the elements before form submit and showing error tooltip next to input element. This works perfect for active tab however for inactive tab, it does not return any position value.

below is the code 

tab id is parameter "divbodyid"

 

1. $('#'+divbodyid+' .required').each(function(){
2.     //inputlength = $(this).val().length;
3.     inputlength = $(this).val();
4.     if (inputlength == null) {
5.         inputlength = 0;
6.     }else {
7.     inputlength = $(this).val().length;
8.     }
9.     
10.     if (inputlength == 0 && $(this).css('visibility') != "hidden" ) {
11.             console.log($(this).attr('id')+" is Empty");
12.             tposition = $(this).position().top;
13.             lposition = $(this).position().left;
14.             flposition = 210 + lposition;
15.             if (flposition >= 950) {
16.                 flposition = 950;
17.                 tposition = tposition + 30;
18.                 errorboxtype = "errorbox-top";
19.             }else {
20.                 errorboxtype = "errorbox-left";
21.             }
22.             
23.             thisid = $(this).attr('id');
24.             thiselement = "errorbox-"+thisid;
25.             if ( $("#"+thiselement).length == 0)
26.             {
27.             $("<div class='"+errorboxtype+"' id='errorbox-"+$(this).attr('id')+"' style='left:"+ flposition +"px; top:"+tposition+"px'>This field can not be blank</div>").appendTo( $('#'+divbodyid) );
28.             }         
29.             }