CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
PrecisionPete
PrecisionPete

Reputation: 3401

Bootstrap 3 Tabs and HTML5 form validation

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>

Upvotes: 7

Views: 14999

Answers (4)

Bosco
Bosco

Reputation: 1554

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

Upvotes: 1

PrecisionPete
PrecisionPete

Reputation: 3401

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.

Upvotes: 2

Will Bowman
Will Bowman

Reputation: 417

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.

Upvotes: 3

Nitish Kumar
Nitish Kumar

Reputation: 4870

You can use HTML5 new feature

input form Attribute

The form attribute specifies one or more forms an element belongs to.

Example According to http://www.w3schools.com/

An input field located outside the HTML form (but still a part of the form):

<form action="demo_form.asp" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">   
 </form>

 Last name: <input type="text" name="lname" form="form1">

For more Info See This W3School

Upvotes: -2

Related Questions