Bootstrap 3 tabs and HTML5 validation form

Question

The classic problem of checking an item in a hidden tab. I read a hundred posts with complex workarounds. Does anyone have a simpler, more elegant solution that works in the general case? that is not specifically encoded for each form?

HTML5 promises an elegant solution. But the tabs push him ...

thanks

More details ..? From the Bootstrap examples. If you have fields marked "required" (HTML5 check), the check will not work for inactive (hidden) tabs. And I find other javascript validation methods also fail with tabs.

I hope someone has a good general solution method that does not require grunting in the code on every page. HTML5 validation is nice and clean - until you add tabs ...

He will not obey. But it also will not give an error ...

<!-- 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> 

Answer 1

I refused HTML5 validation ... Maybe in the future. But he still has problems.

Now I am very lucky using the "Bootstrap Validator" ( http://bootstrapvalidator.com/ ). It works great with tabs, responds to HTML5 validation tags, and has many validators. Still quite new, but it seems to be actively working. Everything goes well.

Answer 2

The most annoying problem, you might think that chrome (or any other browser that has this problem) will check if it is visible before doing anything, but like good internet researchers, you need to hack the problem with the browser.

 $(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 did not want to change anything in my code, but another solution is to add class = 'required', so we do not 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 area.

Answer 3

You can use the new HTML5 feature

input form attribute

A form attribute defines 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 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 information see this W3School