Bootstrap 3 Tabs and HTML5 form validation

Question

Classic problem of validating an element that is on a hidden tab. I've read a hundred posts with complex workarounds. Does anyone have a simpler, more elegant solution that works in a generic case? i.e. not coded specifically to each form?

HTML5 promises an elegant solution. But Tabs bugger it up...

Thanks

More..? From the Bootstrap examples. If you have fields marked "required" (HTML5 validation), the validation will not work for the non-active (hidden) tabs. And I believe other javascript validation techniques also fail with tabs.

I'm hoping someone has nice a generic technique to solution which does not require witing into the code on every page. HTML5 validation is nice and clean - until you add tabs...

It won't submit. But it won't give an error either...

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...
    <input type="text" name="name" required>
  </div>
  <div class="tab-pane" id="messages">...
    <input type="text" name="address" required>
  </div>
  <div class="tab-pane" id="settings">...</div>
</div>

Solution 1

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.

Solution 2

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.

Solution 3

This might help someone

To also follow what the OP said more elegant solution that works in a generic case? i.e. not coded specifically to each form

I had to switch to the tab with the invalid input(in my case the inputs that have required were textareas)

$("form textarea").on("invalid", function(){
    var invalid_input = $(this).closest('.tab-pane').index();
    var all_tabs = $('.tab-pane');
    var tabs_id = all_tabs[invalid_input].id;

    var activeTabLink = $('.nav-link.active.show');
    var activeTab = $('.tab-pane.active.show');
    showTabWithInvalidInput(activeTab[0].id, tabs_id)
});

function showTabWithInvalidInput(currentTab, invalidTab) {
    $('#'+currentTab).removeClass('active');
    $('#'+invalidTab).addClass('active');
    $('#'+invalidTab).addClass('show');
}

NOTE Because the OP requested solution for generic case, this will not switch the active tab link, I had to acheived that by adding ids the tab links and targeting them properly, You can also validate based on other form inputs with this, my case was textarea