Zuletzt geändert am:
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 Formularelementes.
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.
function validate() {
// Hier kommt Ihre Validierungslogik
}
In den Seiteneigenschaften gibt es den Bereich Validierung, in dem Sie Ihre Prüfskripte hinterlegen können.
validate()-Funktion mit der gewünschten Prüflogik.
Mit JavaScript können Sie einfach auf die Daten Ihrer Formulare zugreifen:
Für den Umgang mit Datumswerten und Dropdown-Listen stellt Ihnen Formcentric verschiedene JavaScript-Funktionen zur Verfügung.
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.
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.
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.
Die JavaScript-Funktion isSelected überprüft, ob Nutzer*innen bei einer bestimmten Dropdown-Liste, Einfach- oder Mehrfachauswahl eine bestimmte Option gewählt haben.
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 |
|
| 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 |
|
function validate() {
var age = parseAge("dd.MM.yyyy", birthday);
if (isSelected(newsletter, "ja") && age < 16) {
return "Um dich für den Newsletter anmelden zu können, musst du mindestens 16 Jahre alt sein.";
}
return "";
}
Das macht die Validierung |
|
|
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 |
|
function validate() {
if (ort != "" && postleitzahl == "") {
return "Bitte geben Sie auch eine Postleitzahl ein.";
}
return "";
}
if (postleitzahl != "" && ort == "") {
return "Bitte geben Sie auch einen Ort ein.";
}
return "";
}
Das macht die Validierung |
|
|
