Bootstrap 3 Onglets et de validation de formulaire HTML5

Problème classique de la validation d'un élément qui est sur un caché onglet. J'ai lu une centaine de postes complexe, avec des solutions de contournement. Quelqu'un aurait-il une solution plus simple et plus élégante solution qui fonctionne dans un cas générique? c'est à dire pas codé spécifiquement pour chaque formulaire?

HTML5 promet une solution élégante. Mais les Onglets bugger jusqu'à...

Grâce

Plus..? À partir du Bootstrap exemples. Si vous avez les champs marqués "nécessaire" (la validation HTML5), la validation ne fonctionne pas pour les non-actifs (caché) des onglets. Et je crois que d'autres javascript techniques de validation échoue aussi avec des onglets.

Je suis en espérant que quelqu'un a bien une technique générique pour une solution qui ne nécessite pas de witing dans le code sur chaque page. La validation HTML5 est agréable et propre - jusqu'à ce que vous ajoutez des onglets...

Il ne se soumettent pas. Mais il ne vous donnera pas une erreur non plus...

<!-- 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>
  • un exemple de ce que vous essayez de le faire serait utile ici.
  • Le problème présente lui-même sur le bootstrap des exemples si vous ajoutez des champs obligatoires... Voir ci-dessus.