Zuletzt geändert am:
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:
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
}
Mit der validate()-Funktion definieren Sie eigene, browserseitige Prüfungen.
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.
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 |
|
|
