Formulare (Zusätzliche Feldtypen, Logik und Abhängigkeiten)

Dieses Formular hat das Attribut data-form-submitonce. Damit wird beim Versand des Formulars jeder Submitbutton in den "Processing" Zustand versetzt und damit für weitere Klicks deaktiviert.

Um Benutzer nicht zu verwirren, werden auch Links im Stile von Buttons (z.B.: "Zurück", "Abbrechen") am Ende eines solchen Formulars deaktiviert. Obschon beim Anklicken der Links keine Daten übermittelt würden.

Dieses Select hat eine extra CSS Klasse class="form__select--js-select-url" und die Optionen des Selects halten URLs vor. So kann aus einer Liste von Webadressen ausgesucht werden. Dies wird beispielsweise zur Standortsuche eingesetzt. (Hinweis: Das Select muss trotzdem in einem form-Tag sein.)

Felder in diesem Formular haben ein data Attribut data-form-autosubmit-on-change="true". Wenn ein solches Feld verändert wird, löst dies automatisch die Übermittlung des betroffenen Formulars aus. Dies wird beispielsweise zur Standortsuche eingesetzt.

Felder in diesem Formular haben ein data Attribut data-form-prefill. Wenn ein solches Feld den Fokus erhält und zu diesem Zeitpunkt keinen Wert hat, wird der Wert aus dem data-Attribut eingetragen.

Dieses Formular wird mit Hilfe des Accordion-Element in mehrere Unterbereich unterteilt.

Verschachtelte Conditionals mit aktivem Subconditional

Bei initialisierung der Seite kann es sein, dass verschachtelte Conditionals aktiv sind, nicht aber deren Parent. In solchen Fällen muss das verschachtelte Conditional deaktiviert bleiben, um nicht die Validierung zu beeinflussen.

Dieses Formular testet die Abhängigkeits-Funktion auf ganze Fieldsets

Dieses Formular testet die Logik von multiplizierbaren Feldern / Feldgruppen

Beispiel für den Einsatz in Applikationen, welche Indexwerte erwarten. Feldnamen mit "[0]"

Beispiel für maximale Anzahl an multiplizierbaren Feldern, in diesem Falle höchstens zwei Kopien:

Beispiel für ein Feld, das komplett neu hinzugefügt werden kann

Kombinations-Beispiel: Feld, das komplett neu hinzugefügt werden kann, aber maximal drei mal

Dieses Formular testet die Logik von multiplizierbaren Feldern, die bereits vorausgefüllt vom Server kommen können.

Beispiel für den Einsatz in Applikationen, welche Indexwerte erwarten. Feldnamen mit "[0]"

Dieses Formular testet die Logik von multiplizierbaren Spezialfeldern

Dieses Formular testet die Logik von multiplizierbaren Fragegruppen (Fragegruppen sind eine beliebige Anzahl an sinngemäß zusammengefassten Feldern/Feldgruppen. Diese werden dann optisch voneinander mit einer Linie getrennt und bekommen die extra-Klasse form__clonable--group)

Dieses Formular testet die Logik von verschachtelten multiplizierbaren Feldern in multiplizierbaren Fragegruppen

Dieses Formular testet die Logik von verschachtelten multiplizierbaren Feldern für Applikationen welche Indexwerte erwarten (Feldnamen mit "[0]").

Dieses Formular testet die Logik von multiplizierbaren Fieldsets innerhalb von Conditional-Feldern:

Diese Formular stellt einen Dialog zur Eingabe von Öffnungszeiten bereit

Dieses Formular testet Berechnungen, die zwischen unterschiedlichen Feldern durchgeführt werden können.

Berechnungen können über das data-attribute data-form-calculate-formula definiert werden, die Anzahl der anzuzeigenden Dezimalstellen werden über data-form-calculate-decimal-places gesteuert. In diesem Beispiel ist für das Summenfeld folgende Formel hinterlegt: {{calcfield1 || 0}} + {{calcfield2 || 0}} + {{calcfield3 || 0}} und für das Multiplikationsfeld {{calcfield1 || 1}} * {{calcfield2 || 1}} * {{calcfield3 || 1}}. Die Felder aus denen Werte ausgelesen werden sollten von type="number" sein, und die Felder, in denen die Berechnung stattfindet muss eine Berechnungsformel über das data-Attribut data-form-calculate-formula bekommen, um die Berechnung zu initialisieren.

Felder die mit einer Währungsangabe ausgezeichnet werden sollen müssen readonly-Felder sein, damit die Validierung korrekt funktioniert. Sofern auf die Währungsangabe verzichtet werden kann, können die Felder auch als Eingabefelder benutzt werden.

Dieses Formular testet Berechnungen, die zwischen unterschiedlichen Feldern durchgeführt werden können.

Formularfelder bei denen bei der Eingabe Leerschläge entfernt werden. Funktioniert nur mit Textfeldern!

Das Formular kann über einen Link innerhalb oder ausserhalb eines des Formulars abgesendet werden. So könnten z.B. auch Links in der Fortschrittsanzeige einen Formularsubit auslösen.