Bootstrap 3 Tabs and HTML5 form validation

Most annoying problem, one would think chrome (or any other browser that has this issue) would check if its visible before doing anything, but like the good 'ol internet explorer days one must hack around a browser issue..

$(document).on('shown.bs.tab','a[data-toggle="tab"]',function(e){
    $(':input[required]:hidden').removeAttr('required').addClass('wasrequired');
    $('.wasrequired:visible').removeClass('wasrequired').prop('required', 'required');
})

I didn't want to have to modify anything in my code but another solution is to add a class='required' so we dont need to use 'wasrequired' as a tmp solution.

I also had to add my form class, .form-ajax in the selectors since my form was outside the tabs scope.

I gave up on HTML5 validation... Maybe in the future. But it's still got some problems.

I am now having pretty good luck using "Bootstrap Validator" (http://bootstrapvalidator.com/). It works fine with tabs, responds to the HTML5 validation tags, and has lots of validators. Still pretty new but it seems to be actively worked on. It's going well.