Mit JavaScript Formularelemente validieren und verknüpfen
Bei der Validierung mit JavaScript können Sie benutzerdefinierte Validierungslogik für Ihre Formulare implementieren. Anders als die Standard-Validierung einzelner Formularelemente ermöglicht diese Methode die gleichzeitige Prüfung mehrerer Eingaben und deren Beziehungen zueinander.
Sie können zum Beispiel:
Mehrere Formularfelder in Beziehung setzen: Prüfen Sie beispielsweise, ob eine eingegebene Postleitzahl mit dem angegebenen Ort übereinstimmt.
Berechnungen durchführen: Ermitteln Sie automatisch Werte, wie etwa das Alter einer Person aus ihrem Geburtsdatum.
Validierung mit der validate()-Funktion
Jedes Formular ermöglicht die Definition eines Validierungsskripts pro Formularseite. Darin ist eine vorbereitete Prüffunktion mit dem Namen validate() enthalten. Diese Funktion wird automatisch ausgeführt, sobald Nutzer:innen zwischen Formularseiten wechseln oder das Formular absenden.
Mit der validate()-Funktion definieren Sie eigene, browserseitige Prüfungen.
Validierung aktivieren
In den Seiteneigenschaften gibt es den Bereich Validierung, in dem Sie Ihre Prüfskripte hinterlegen können.
Schieben Sie den Schalter bei Validierung nach rechts, um die Funktion zu aktivieren.
Wählen Sie die Option JavaScript aus.
Definieren Sie im Feld Validierungsskript Ihre validate()-Funktion mit der gewünschten Prüflogik.
Integrierte JavaScript-Funktionen
Für den Umgang mit Datumswerten und Dropdown-Listen stellt Ihnen Formcentric verschiedene JavaScript-Funktionen zur Verfügung.
parseDate
Die JavaScript-Funktion parseDate wandelt den Wert eines Eingabefeldes in ein JavaScript-Objekt vom Typ Date um.
Hierfür benötigen Sie entweder ein Eingabefeld, das mit dem Validator Datum validiert wird oder das Formularelement Datum, in das Nutzer*innen ein Datum eingeben sollen.
Als ersten Parameter geben Sie im JavaScript das Datumsformat an, das Sie bei dem Validator Datum für das Eingabefeld festgelegt haben (z. B. dd.MM.yyyy).
Als zweiten Parameter geben Sie den technischen Namen an, den Sie für das Eingabefeld vergeben haben (z. B. training).
parseAge
Die JavaScript-Funktion parseAge berechnet zu einem eingegebenen Geburtsdatum das aktuelle Alter.
Hierfür benötigen Sie entweder ein Eingabefeld, das mit dem Validator Datum validiert wird oder das Formularelement Datum, in das Nutzer*innen ihr Geburtsdatum eingeben sollen.
Als ersten Parameter geben Sie im JavaScript das Datumsformat an, das Sie bei dem Validator Datum für das Eingabefeld festgelegt haben (z. B. dd.MM.yyyy).
Als zweiten Parameter geben Sie den technischen Namen an, den Sie für das Eingabefeld vergeben haben (z. B. birthday).
isEmptyList
Die JavaScript-Funktion isEmptyList prüft, ob bei einem Formularfeld, in dem Nutzer*innen eine Auswahl treffen können, also bei einer Dropdown-Liste, einer Einfach- oder Mehrfachauswahl, eine Auswahl getroffen wurde.
Geben Sie hierfür als Parameter den technischen Namen des entsprechenden Formularfeldes ein (z. B. newsletter).
isSelected
Die JavaScript-Funktion isSelected überprüft, ob Nutzer*innen bei einer bestimmten Dropdown-Liste, Einfach- oder Mehrfachauswahl eine bestimmte Option gewählt haben.
Als ersten Parameter geben Sie im JavaScript den technischen Namen des Formularfeldes mit der Auswahl an (z. B. newsletter).
Als zweiten Parameter geben Sie den Wert der Option an (z. B. "ja"), den Sie prüfen möchten.
Praxisbeispiele
Beispiel 1: Altersbeschränkung für Newsletter
Mit diesem JavaScript prüfen Sie, ob Personen, die sich für einen Newsletter anmelden, mindestens 16 Jahre alt sind. Richten Sie im Formular folgende Formularelemente ein.
Eingabefeld für Geburtsdatum
Beschriftung
Geburtsdatum
Technischer Name
birthday
Validierung
Datum
Datumsformat
dd.MM.yyyy
Einfachauswahl für Newsletteranmeldung
Beschriftung
Anmeldung zum Newsletter
Technischer Name
newsletter
Optionen
Beschriftung: Newsletter abonnieren (Wert: ja)
Beschriftung: Newsletter nicht abonnieren (Wert: nein)
Aktivieren Sie auf der Formularseite die Validierung und wählen Sie die Option 'JavaScript' aus. Fügen Sie anschließend das folgende Validierungsskript ein.
Validierungsskript für Altersbeschränkung
Das macht die Validierung:
Das Alter wird mithilfe der Funktion parseAge() berechnet. Diese Funktion verwendet das angegebene Format (dd.MM.yyyy) und das Geburtsdatum aus dem Feld birthday.
Die Funktion prüft, ob die Option ja im Feld newsletter ausgewählt ist. Falls dies der Fall ist, wird geprüft, ob die Person mindestens 16 Jahre alt ist.
Wenn das Alter unter 16 liegt, gibt die Funktion eine Fehlermeldung zurück, die Nutzer:innen darüber informiert, dass die Anmeldung nicht erlaubt ist.
Liegen keine Fehler vor, gibt die Funktion einen leeren String zurück.
Beispiel 2: Postleitzahl nur mit Ort
In diesem Beispiel wird keine der zuvor beschriebenen JavaScript-Funktionen eingesetzt. Stattdessen kommt eine einfache Validierungslogik zum Einsatz, die lediglich die Beziehung zwischen den Feldern Postleitzahl und Ort überprüft.
Eingabefeld für Ortsangabe
Beschriftung
Ort
Technischer Name
ort
Eingabefeld für Postleitzahl
Beschriftung
Postleitzahl
Technischer Name
postleitzahl
Validierung
Postleitzahl
Aktivieren Sie auf der Formularseite die Validierung und wählen Sie die Option 'JavaScript' aus. Fügen Sie anschließend das folgende Validierungsskript ein.
Validierungsskript
Das macht die Validierung:
Wenn ein Wert im Feld ort angegeben ist, muss auch das Feld postleitzahl ausgefüllt sein.
Umgekehrt wird geprüft, dass bei Angabe der postleitzahl auch ein Wert im Feld ort vorhanden ist.
