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.
InformationsquelleAutor PrecisionPete | 2014-05-20
  1. 3

    Plus ennuyeux problème, on pourrait penser chrome (ou tout autre navigateur qui a ce problème) serait de vérifier si son visible avant de faire quoi que ce soit, mais, comme dans le bon vieux internet explorer jours on doit pirater autour d'un problème de navigateur..

    $(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');
})

    Je ne voulais pas avoir à modifier quoi que ce soit dans mon code mais une autre solution est d'ajouter une class= "requis" si nous n'avons pas besoin d'utiliser "wasrequired" comme un tmp solution.

    J'ai également eu à ajouter à ma classe de forme, .forme ajax dans les sélecteurs depuis mon formulaire est en dehors de la onglets portée.

    • Intelligent, je l'aime. Mais ce que sur la prévention de présenter encore?
    • Sur votre formulaire de soumission de vérifier les champs sont vides ou invalides qui ont le wasrequired'.
    InformationsquelleAutor asked_io
  2. 2

    J'ai renoncé à la validation HTML5... Peut-être dans l'avenir. Mais il a encore quelques problèmes.

    Je suis maintenant avoir assez bonne chance à l'aide de "Bootstrap Validateur" (http://bootstrapvalidator.com/). Il fonctionne très bien avec les onglets, répond à la validation HTML5 balises, et il y a beaucoup de validateurs. Encore assez nouveau, mais il semble être travaillé sur. Ça se passait bien.

    • Salut @PrecisionPete ce plugin est payé. Comment avez-vous utilisé que la validation plugin pouvez-vous me dire s'il vous plaît?
    InformationsquelleAutor PrecisionPete
  3. 0

    Vous pouvez utiliser HTML5 nouvelle fonctionnalité

    formulaire de saisie de l'Attribut

    La forme d'attribut spécifie une ou plusieurs formes d'un élément
    appartient à.

    Exemple, Selon http://www.w3schools.com/

    Un champ de saisie situé en dehors du formulaire HTML (mais encore une partie de la forme):

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

    Pour plus d'informations, Voir Ce W3School

    • C'est intéressant. Mais comment permet-il de résoudre le problème de la validation d'un champ caché?
    InformationsquelleAutor Nitish Kumar