Formularzuständen

Formularzustände bezeichnet den aktuellen status eines Formulars oder einzelner Formularfelder. Sie dienen der Steuerung von Validierung, Interaktivität, Feedback und Barrierefreiheit. Zustände können sowohl das gesamte Formular betreffen als auch feingranular auf Felder angewendet werden.

Zu den typischen Feldzuständen gehören: pristine oder unberührt (das Feld wurde noch nie verändert), dirty oder verändert (Wert wurde geändert), untouched beziehungsweise touched (Fokus wurde gesetzt und verlassen), valid oder invalid (basierend auf Validatoren), error (Fehlermeldung vorhanden), pending oder validating (asynchrone Prüfung läuft) sowie required (Pflichtfeld). Zusätzlich kann ein Feld deaktiviert sein (disabled).

Für ganze Formulare entstehen oft Zustände wie submittable oder ready-to-submit (das Formular ist gültig und bereit zur Übermittlung), submitting (Übermittlung läuft) sowie submitted mit Erfolg oder submissionError (Ergebnis der Übermittlung). Manche Systeme unterscheiden außerdem loading oder idle und success.

Implementierung und Nutzung: Formularzustände werden in der Benutzerschnittstelle durch Zustandsverwaltung gemanagt, um Validierungsergebnisse, Fehlermeldungen, Ladeanzeigen und Steuerelemente (z. B. Submit-Button) entsprechend zu steuern. Bekannte Bibliotheken wie Formik oder React Hook Form in JavaScript-Umgebungen bzw. Reactive Forms in Angular stellen Felder- und Formularzustände bereit und ermöglichen deklarative Validierung.

Zugänglichkeit und Design: Zustände sollten durch ARIA-Attribute (z. B. aria-invalid) und klare Fehlermeldungen kommuniziert werden. Visuelle Indikatoren (Farben, Symbole) müssen für Tastaturnutzung und Bildschirmleser konsistent sein. CSS-Selektionen wie :valid/:invalid oder passende Klassen unterstützen die visuelle Unterscheidung.

Dieser Überblick skizziert Grundkonzepte; konkrete Implementierungen variieren je nach Framework und Anwendungsfall.