Mithilfe von JavaScript haben Sie die Möglichkeit, Eingaben mehrerer Formularelemente gleichzeitig zu validieren und miteinander in Beziehung zu setzen. Da Sie alle Operationen und Funktionen von JavaScript verwenden können, sind Ihnen keine Grenzen gesetzt.
Der Zugriff auf die Formularelemente und somit auf die Eingaben der Nutzer:innen in das Formular, erfolgt im JavaScript über den technischen Namen des jeweiligen Formularfeldes.
Für den Umgang mit Datumswerten und Dropdown-Listen stellt Ihnen Formcentric folgende zusätzliche JavaScript-Funktionen zur Verfügung:
Die JavaScript-Funktion parseAge wandelt den Wert eines Eingabefeldes in ein JavaScript-Objekt vom Typ Date um.
Hierfür benötigen Sie ein Eingabefeld, das mit dem Validator Datum validiert wird und 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).
Die JavaScript-Funktion parseAge berechnet zu einem eingegebenen Geburtsdatum das aktuelle Alter.
Hierfür benötigen Sie ein Eingabefeld, das mit dem Validator Datum validiert wird und 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).
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).
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.
Angenommen, Nutzer:innen sollen sich in Ihrem Formular für einen Newsletter anmelden können. Hierbei möchten Sie sicherstellen, dass sich nur Nutzer:innen anmelden können, die mindestens 16 Jahre alt sind. Wenn Nutzerinnen oder Nutzer jünger sind, können sie das Formular zwar ausfüllen und abschicken, sich jedoch nicht erfolgreich für den Newsletter anmelden. Stattdessen erhalten sie beim Versuch, das Formular abzusenden oder zur nächsten Seite zu gehen, eine Fehlermeldung. Diese informiert sie darüber, dass sie das erforderliche Mindestalter für die Anmeldung nicht erreicht haben.
Hier setzen wir JavaScript ein, das sich auf zwei Formularfelder bezieht.
Das eine Formularfeld, auf das sich das JavaScript bezieht, ist ein Eingabefeld, in das Nutzer:innen das Geburtsdatum eintragen. Hier wird das eingegebene Geburtsdatum validiert und geprüft, ob das erforderliche Mindestalter von 16 Jahren vorliegt. Der technische Name des Eingabefeldes lautet “birthday” und das bei Validator Datum ausgewählte Datumsformat “dd.MM.yyyy.”
Das zweite Formularfeld, auf das sich das JavaScript bezieht, ist eine Einfachauswahl für die Newsletter-Anmeldung. Der technische Name der Einfachauswahl ist “newsletter” und der zu überprüfende Wert der Option lautet "ja". Das Ergebnis der Validierung des Geburtsdatums hat einen direkten Bezug zu diesem Wert. Nur wenn das erforderliche Mindestalter vorliegt, können sich Nutzer:innen für den Newsletter anmelden. Wenn das erforderliche Mindestalter nicht erreicht ist, können sie das Formular nur ohne Newsletter-Anmeldung absenden.
