Navigate to element in Different tab of same page using focus() function

Question

I am doing validation of entire form which is spread into different section where each section is a nav-tab , when i fill the entire form and cursor is in the last section, on clicking the save button if there is a validation mismatch of textbox in first section(first nav-tab) and if i want the user to be focused to the failed textbox document.getElementById(ID).focus() is not navigating to the element where validation has failed.

How to achieve the above functionality??

 function validate()
    {
      var valid = true;
      var alphaFilter = /^[A-z]{0,}$/;
      if (!(alphaFilter.test($('#fieldId').val()))
      {
        if(valid){$('#fieldId').focus();}
        $('#fieldId').css("border-color", "#e84e40");
        valid = false ; 
      }
       --- each field has its own if condition
       return valid;
    }

validate function is called inside the submit function for further processing and valid variable is used to focus first invalid entry in the form.

Answer 1

I would make a param to take in selectors to make this more usable.

Something like this..

function switchtab (){
    $("#tab1").removeClass("active");
    $("#tab2").addClass("active");
    $("#tabpanel1").removeClass("active");
    $("#tabpanel2").addClass("active");
    //should be good to focus now
    $(selector).focus();
}