An invalid form control with name='fieldname' is not focusable.

I have a bootstrap tab surrounds by a form tab, if i change a field on tab2 and click save, and i have a required field on Tab 1 that has not been populated i get the javascript error:

An invalid form control with name='gender_legal' is not focusable.

I understand that it is because it is trying to add the focus to the control on the tab that is not visible, I have tried to intercept the save button click, thinking i could change that tab in javascript, but the onclick does not occur before the form validation. I dont want to remove the inbuilt validation completely and do it all myself. Has anyone managed to resolve this?

Many Thanks