Wie abfangen Formular onsubmit, wenn Pflichtfelder ausgeblendet sind?

Question

Ich habe ein großes Formular, das ich dem Benutzer mit Bootstrap-Registerkarten präsentiere. Auf verschiedenen Registerkarten gibt es Eingabefelder mit einem required="required" Attribut.

<!-- illustrative code only, with all the excess cruft elided --> 
<form onsumbit="return somefunction(this);" method=post action="url"> 
    <fieldset style="display: none;"> 
    <!-- the hidden tab --> 
    <input required name="princess"> 
    </fieldset> 
    <fieldset> 
    <input required name="goomba"> 
    </fieldset> 
    <button type=submit>Save</button> 
</field> 

Wenn es leer erforderliche Felder auf nicht-aktuell Tabs und ich den Absenden-Button klicken, dann wird das Formular nicht eingereicht, aber auch der Browser (Chrome v55) tut nichts, um den Benutzer zu den leer erforderlichen Feldern zu alarmieren auf den ausgeblendeten Tabs.

Ich habe einen onsubmit="return validateForm(this)" Handler auf dem <form…> Element dachte ich es sinnvoll, etwas tun könnte ... aber das Handler wird nicht aufgerufen werden. Es scheint, dass der Browser alle nicht sichtbaren Eingaben auf Gültigkeit und Ersticken prüft, bevor er den Handler onsubmit aufruft.

In der Konsole sehe ich eine Fehlermeldung von "Ein ungültiges Formular Steuerelement mit Name = 'Prinzessin' ist nicht fokussierbar." Die Formularsteuerung princess befindet sich auf einer anderen Registerkarte (<input type=text name=princess required=required>) und dieser Fehler wird ausgelöst, bevor der onsubmit eine Ausführungsmöglichkeit erhält.

Also .. angehen mit <form onsubmit=…> ist nicht die richtige Strategie.

Was kann ich tun, um einige js auszuführen, wenn der Benutzer versucht, das Formular zu übermitteln, und dass js anmutig das Notwendige tun?

Answer 1

Ein grober Entwurf der Verwendung required in HTML5 und lassen Sie JS die Validierung. Es wird nicht die Inline verwendet onsubmit=...

Dies ist ein Entwurf von nicht einen sehr guten Programmierstil (eine Mischung aus jQuery & nicht-jQuery und Hacks zum Schalten „Tabs“). Stornierung der Formulareinreichung von this answer.

Try it on CodePen

Sie können das form Element auf eine validate(form) Funktion innerhalb der Event-Handler übergeben, so dass Sie Ihre eigenen validate() implementieren können, wenn die Felder ausgefüllt sind zu überprüfen (erforderlich), mit gültigen Werten (wie Daten/Werte innerhalb eines Bereichs).

Zumindest "js, wenn der Benutzer versucht, das Formular zu übermitteln und js das anmutige tun". ;)

Hoffe das hilft!