Bootstrap 3 Tabs und HTML5 Formularvalidierung

Question

Klassisches Problem der Validierung eines Elements, das sich auf einer ausgeblendeten Registerkarte befindet. Ich habe hundert Beiträge mit komplexen Problemumgehungen gelesen. Hat jemand eine einfachere, elegantere Lösung, die in einem allgemeinen Fall funktioniert? d.h. nicht spezifisch für jede Form codiert?

HTML5 verspricht eine elegante Lösung. Aber Tabs bugger it up ...

Dank

Mehr ..? Aus den Bootstrap-Beispielen. Wenn Sie Felder mit "erforderlich" (HTML5-Validierung) markiert haben, funktioniert die Validierung nicht für die nicht aktiven (ausgeblendeten) Registerkarten. Und ich glaube, dass andere Javascript Validierungstechniken auch mit Tabs fehlschlagen.

Ich hoffe, jemand hat nett eine generische Technik zur Lösung, die nicht erfordert, in den Code auf jeder Seite zu erwischen. HTML5 Validierung ist schön und sauber - bis Sie Tabs hinzufügen ...

Es wird nicht übergeben. Aber es wird nicht einen Fehler entweder geben ...

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

Ich habe HTML5 Validierung aufgegeben ... Vielleicht in der Zukunft. Aber es hat immer noch einige Probleme.

Ich habe jetzt ziemlich viel Glück mit "Bootstrap Validator" (http://bootstrapvalidator.com/). Es funktioniert gut mit Tabs, reagiert auf die HTML5 Validierungs-Tags und hat viele Validatoren. Immer noch ziemlich neu, aber es scheint aktiv zu arbeiten. Es läuft gut.

Answer 2

Sie HTML5 verwenden können neue Funktion

Eingabeformular Attribut

Das Formular Attribut gibt eine oder mehrere Formen ein Element gehört zu.

Beispiel nach http://www.w3schools.com/

ein Eingabefeld außerhalb der HTML-Formular befindet (aber immer noch ein Teil der 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"> 

Für mehr Informationen zu diesem W3School Siehe

Answer 3

Meistens nerviges Problem, man würde denken, Chrom (oder irgendein anderes b rowser, der dieses Problem hat) würde, wenn seine sichtbar überprüfen, bevor irgendetwas zu tun, aber wie die guten alten Internet Explorer Tage muss man sich um ein Browser-Problem hacken ..

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

ich nichts zu ändern haben wollte In meinem Code ist aber eine andere Lösung, eine Klasse = 'erforderlich' hinzuzufügen, so dass wir 'waterrequired' nicht als tmp-Lösung verwenden müssen.

Ich musste auch meine Formularklasse .form-AJAX in den Selektoren hinzufügen, da mein Formular außerhalb des Bereichs der Registerkarten war.