Unsere Ideen für Ihr Projekt

Formularfelder bei der Eingabe validieren mit trilobit_formvalidation

Logo der Contao-Erweiterung trilobit_formValidation

Es ist eigentlich nichts Neues und dennoch wird die Führung des Benutzers beim Ausfüllen eines Formulars immer wieder vernachlässigt. Oft einfach auch deswegen, weil es einen erhöhten Denk- und Programmieraufwand erfordert, alle Prüfungen individuell fest zu legen. Unsere Contao-Erweiterung trilobit_formvalidation erledigt das ohne viel Aufwand.

Was Standard sein sollte

Oft praktiziert ist die Kennzeichnung von Pflichtfeldern, z.B. mittels eines * beim Feldnamen. Das gibt einen schnellen Überblick, ob ich diese Daten wirklich preisgeben muss oder nicht.

Mit HTML5 sind etliche neue Typen von Eingabefeldern hinzugekommen wie beispielsweise E-Mail. Ist der angegebene Text keine syntaktisch korrekte E-Mail-Adresse, so weist der Browser beim Absenden des Formulars darauf hin.

Contao bietet aber über den HTML5-Standard hinaus eine Vielzahl von Eingabe-Elementen, die ebenfalls nützlich sind, wie ein Feld zum Wiederholen eines Passwortes. Stimmt der Wert nicht mit dem Original-Passwortfeld überein, wird nach dem Abschicken des Formulars eine entsprechende Fehlermeldung ausgegeben.

Gute Usability setzt vorher an

Bereits während der Eingabe sollte mittels Live-Überprüfung signalisiert werden, ob die Eingabe zum aktuellen Zeitpunkt den Anforderungen genügt. Angezeigt wird das in unserem Beispiel unten über die Rahmen- und Hintergrundfarbe des Eingabefeldes. Mit jedem Tastendruck und Mausklick kann sich das ändern.

Als Beispiel haben wir ein einfaches Kontaktformular vorbereitet.

  • Anrede
    Der Klassiker: es gibt eine Auswahl aus verschiedenen Möglichkeiten, eine muss gewählt werden, dann wird der Rahmen grün. Wichtig: bei Auswahl der "Leer-Option" springt der Rahmen wieder auf rot.
  • Name
    Sobald ein Zeichen im Eingabefeld steht, sind die Anforderungen erfüllt, das Feld wird grün.
  • E-Mail-Adresse
    Hier reicht es nicht, irgendetwas einzutippen. Das Feld wird erst grün, wenn es sich um eine syntaktisch korrekte E-Mail-Adresse handelt. Da das Feld ein Pflichtfeld ist, ist es von Anfang an rot.
  • Geburtsdatum
    Das Geburtsdatum ist optional, d.h. initial grün dargestellt. Fängt man an zu tippen, erhält man zunächst ein ungültiges Ergebnis, bis man ein korrektes Datum eingegeben hat.
  • Nachricht
    Das gleiche wie beim Feld Namen nur mit einem mehrzeiligen Eingabefeld

Beispiel aus der Praxis: Kontaktformular

Die Contao-Erweiterung trilobit_formvalidation

Das besondere an der Contao-Erweiterung trilobit_formvalidation ist, dass keine gesonderte Konfiguration notwendig ist. Die Erweiterung holt sich alle notwendigen Informationen wie reguläre Ausdrücke zum Validieren oder anzuzeigende Fehlermeldungen aus dem System, so dass alle Prüfungen konsistent sind. Das CSS kann natürlich angepasst werden, um eine optimale Darstellung zu erreichen.

Die Erweiterung nutzt dafür die öffentlich verfügbare Javascript-Bibliothek LiveValidation. Außerdem werden Pflichtfelder entsprechend gesetzt.

Schlägt die Prüfung fehl, wird beim Eingabefeld die Klasse LV_invalid_field gesetzt. Liegt eine gültige Eingabe vor, so wird LV_valid_field gesetzt. Per CSS können diese Klassen beliebig angepasst werden. Durch die Angabe der Formular-ID kann auch ein Formular-individuelles Aussehen definiert werden. Beim Abschicken wird dann auf das umgebende Formular noch die Klasse "formSubmitted" gesetzt, so dass der Entwickler auch hier sein CSS anpassen kann.

Der CSS-Code für diese Art der Anzeige:

span.LV_invalid,
.checkbox_container span.LV_invalid {
    display: none;
}
.formSubmitted span.LV_invalid {
    display: inline;
}
.formSubmitted .checkbox_container span.LV_invalid {
    display: block;
}

Damit ist im Prinzip der Leistungsumfang beschrieben, doch die Möglichkeiten für den Entwickler sind damit noch lange nicht ausgeschöpft. Zwar ist es hilfreich mit einem Blick zu sehen, ob ein Formular gültig ist und abgeschickt werden kann. Im Fehlerfall ist aber eine direkte Hilfestellung sinnvoll.

Im zweiten Formular zeigen wir, wie bereits während der Eingabe die Hinweis- oder Fehlermeldungen dann angezeigt werden, wenn sie benötigt werden. Wird die Eingabe korrigiert, soll auch die Meldung wieder verschwinden. Dazu ist ausschließlich eine CSS-Anpassung notwendig. Die Fehlermeldungen sollen auch dargestellt werden, wenn die Klasse "formSubmit" nicht gesetzt ist.

span.LV_invalid {
    display: inline;
}
.checkbox_container span.LV_invalid {
    display: block;
}

Diese Code-Beispiele sind bereits in der CSS-Datei vorhanden, die mit der Erweiterung mitgeliefert wird.

Seit Version 2.1 von trilobit_formvalidation ist es auch möglich, Fehlermeldungen individuell anzupassen. Dazu dient die DCA-Datei /system/config/langconfig.php.

Hier können Sie Zeilen der folgenden Bauart ergänzen:

$GLOBALS['TL_LANG']['trilobit_formvalidation']['errormsg'][ID des Formularfeldes][Art der Fehlermeldung] = 'Neue Fehlernmeldung';

Für Art der Fehlermeldung gibt es folgende Werte:

  • 'mandatory' - erscheint, wenn ein Pflichtfeld nicht ausgefüllt wurde
  • 'failure' - erscheint, wenn ein Feld nicht korrekt ausgefüllt wurde
  • 'minlength' - erscheint, wenn eine Eingabe zu kurz ist
  • 'maxlength' - erscheint, wenn eine Eingabe zu lang ist

Der Eintrag für den Pflichtfeld-Text des Eingabefeldes "ctrl_firstname" lautet also:

$GLOBALS['TL_LANG']['trilobit_formvalidation']['errormsg'][ID des Formularfeldes][Art der Fehlermeldung] = 'Neue Fehlernmeldung';

Weitere Beispiele finden Sie in der Datei /system/modules/trilobit_formvalidation/languages/de/default.php.

Dann probieren Sie mal drauf los

In diesem Feld ist nur die Eingabe von Zahlen erlaubt. Geben Sie zum Beispiel einen Buchstaben oder ein Sonderzeichen wie # oder & ein, erscheint eine Fehlermeldung.

Ein Passwort für Contao muss mindestens 8 Zeichen lang sein. Hier findet also eine Prüfung auf die Länge der Eingabe statt. Das Feld "Bestätigung" ist korrekt, wenn es mit dem Feld "Passwort" übereinstimmt.

Auswahlboxen*
Radioboxen*

Dies ist ein Beispiel für Auswahlboxen. Da es ein Pflichtfeld ist, muss es ausgefüllt sein. Das bedeutet, mindestens eine Box muss angeklickt sein.

Wo greift die Erweiterung trilobit_formvalidation?

Folgende Formulare werden unterstützt

  • Registrieren
  • Login
  • Persönliche Daten ändern
  • Passwort vergessen
  • Account schließen
  • Newsletter an- und abmelden
  • ab Version 2.1 auch Formulare, die als Modul eingebunden werden
  • ...und natürlich die Formulare aus dem (extended) Formular Generator.

Die Erweiterung ist für Contao 2.11 und 3 im Contao Extension Repository erhältlich.

Known Issues

Die Erweiterung berücksichtigt derzeit keine Datei-Upload-Felder.


Hilfe

Bei Fragen und Anregungen zu der Erweiterung stehen wir natürlich gerne zur Verfügung. Nutzen Sie einfach unser Kontaktformular.


Für diese Erweiterung spenden

Diese Erweiterung hat Ihnen gefallen und Sie nutzen sie auch in Ihren Kundenprojekten? Hier können Sie uns unterstützen.

...oder spenden Sie per Überweisung auf folgendes Konto bei der EthikBank:

BIC: GENODEF1ETK
IBAN: DE77 8309 4495 0003 2066 02
Verwendungszweck: Spende Contao-Erweiterung