Datenschutzhinweis

 

Beim Laden dieses Inhalts werden Nutzungsinformationen an Vimeo übertragen und dort ggf. verarbeitet.

 

             

Formularfeldeigenschaften: Validatoren

Geändert am Fr, 1 Aug um 3:00 NACHMITTAGS

Textfelder können beliebigen frei eingebbaren Text enthalten. Oft sind aber nur bestimmte Werte erlaubt, etwa wenn eine E-Mail-Adresse oder Telefonnummer eingegeben werden muss. Um den Nutzer beim Ausfüllen des Formulars zu unterstützen und ihn früzeitig auf fehlerhafte Eingaben aufmerksam zu machen, können Validatoren an Textfelder gehangen werden.


Inhalt


Viele häufig gebrauchte Datentypen stehen zur Auswahl und können direkt genutzt werden. Es ist aber auch möglich, eigene Datentypen und Validatoren per Regexp, JavaScript oder über Plugins zu definieren.


Eingebaute Validatoren

Für viele oft verwendete Datentypen stehen bereits fertige Validator in FORMCYCLE zur Verfügung. Diese werden rechts im Eigenschaftsbereich unter Bedingungen eingestellt.

Wird ein Formular in mehreren Sprache erstellt, sollen sicherlich auch die Fehlermeldungen in die einzelnen Sprache übersetzt werden. Die Fehlertexte für die eingebauten Validatoren können im i18n-Template eingesehen und bearbeitet werden.


Alternativ ist es bei jedem Datentyp möglich, direkt am Eingabefeld eine entsprechende Fehlermeldung einzutragen. Diese kann über die Sprachauswahl im Formular-Designer auch in andere Sprachen übersetzt werden. Wenn möglich, empfehlen wir zur Wahrung der Einheitlichkeit, Fehlermeldungen global über das i18n-Template zu pflegen. Diese Option kann aber hilfreich sein, wenn die Fehlermeldung nur für ein bestimmtes Eingabefeld anders sein soll.

Folgende Validatoren stehen zur Verfügung:


Name XM_FORM_VRULES Beschreibung
Text-Standardeinstellung. Die Eingabe wird nicht validiert. Alle Zeichen sind erlaubt.
Buchstaben & LeerzeichenonlyLetterSpEs sind nur Buchstaben (UTF-8) und Leerzeichen erlaubt. Die Eingabe von landesspezifischen Sonderzeichen (z.B. öäü) ist erlaubt!
Buchstaben, Zahlen und LeerzeichenonlyLetterNumberEs sind nur Buchstaben (UTF-8), Zahlen und Leerzeichen erlaubt. Die Eingabe von landesspezifischen Sonderzeichen (z.B. öäü) ist erlaubt!
Zahl-

8.4.0 Es sind nur Zahlen erlaubt. Ist dieses Format ausgewählt, erscheinen weitere Einstellungen, um das Zahlenformat zu konfigurieren (z.B. Dezimaltrennzeichen oder Anzahl der Kommastellen).

E-MailemailE-Mail-Validator (E-Mail-Adresse)
E-Mail (Traditionell o. Umlaute)traditionalEmailstrikterer E-Mail-Validator ohne Umlaute (z.B. öäü)
Datum (DD.MM.YYYY)datumDEDatums-Validator, der das Datum auf die Syntax "DD.MM.YYYY" prüft. (z.B. 01.01.2015)
UhrzeittimePrüft die Eingabe auf das Format "mm:hh". (z.B. 01:30 oder 13:30)
Postleitzahl (Deutschland)plzDEPrüft die Syntax einer deutschen Postleitzahl. (5 Zahlen)
TelefonnummerphoneTelefonnummer (z.B. +49 351 810 500 oder 0049-351-810-500 oder 0049/351/810/500)
URLurlURL (z.B. http://www.xima.de oder https://www.xima.de oder ftp://ftp.xima.de)
IP Adresseipv4IP V4 Adresse (z.B. 127.0.0.1 oder 192.168.0.255)
Regulärer Ausdruck-Erlaubt die Verwendung einer eigenen RexExp zur Validierung. Ist dieser Datentyp ausgewählt, kann die zu nutzende RegExp eingegeben werden. Die RegExp wird als JavaScript RegExp ausgewerted, diese sind näher beschrieben unter mozilla.org.
Zahlnumber

8.4.0 Es sollte der neue Datentyp "Zahl" verwendet werden. Dieser erlaubt die Konfiguration des Zahlenformats, der Einheit sowie des Mindest- und Höchstwerts.


Es sind nur Zahlen - ohne Punkt jedoch mit Komma - erlaubt. (z.B. 100 oder -100 oder 100,10 ...)
Geldbetragmoney

8.4.0 Es sollte der neue Datentyp "Zahl" verwendet werden. Dieser erlaubt die Konfiguration des Zahlenformats, der Einheit sowie des Mindest- und Höchstwerts.


Geldbetrag ohne Tausendertrennzeichen aber mit Nachkommastellen. (z.B. 100,00)
Positiver Geldbetragposmoney

8.4.0 Es sollte der neue Datentyp "Zahl" verwendet werden. Dieser erlaubt die Konfiguration des Zahlenformats, der Einheit sowie des Mindest- und Höchstwerts.


Positiver Geldbetrag ohne Tausendertrennzeichen aber mit Nachkommastellen. (z.B. 100,00)
Positiver Geldbetrag (opt. Nachkomma)posmoneyOptionalComma

8.4.0 Es sollte der neue Datentyp "Zahl" verwendet werden. Dieser erlaubt die Konfiguration des Zahlenformats, der Einheit sowie des Mindest- und Höchstwerts.


Positiver Geldbetrag ohne Tausendertrennzeichen mit optionalen Nachkommastellen. (z.B. 100,00)
Positive Ganzzahlposinteger

8.4.0 Es sollte der neue Datentyp "Zahl" verwendet werden. Dieser erlaubt die Konfiguration des Zahlenformats, der Einheit sowie des Mindest- und Höchstwerts.


Es sind nur positive Zahlen - ohne Punkt und Komma - erlaubt. (z.B. 100)
Ganzzahlinteger

8.4.0 Es sollte der neue Datentyp "Zahl" verwendet werden. Dieser erlaubt die Konfiguration des Zahlenformats, der Einheit sowie des Mindest- und Höchstwerts.


Es sind nur Zahlen - ohne Punkt und Komma - erlaubt. (z.B. 100 oder -100)


Datentyp Zahl

8.4.0 Ist der Datentyp "Zahl" ausgewählt, kann das Zahlenformat konfiguriert werden.


Grundlegende Einstellungen


Einstellung
Beschreibung
KommastellenDie maximale Anzahl der Kommastellen, die erlaubt ist. In den fortgeschrittenen Einstellungen kann konfiguriert werden, ob die Kommastellen immer bis zum erlaubten Höchstwert mit Nullen aufgefüllt werden sollen. 
TausendtrennerDas Trennzeichen für die Gruppierung der Ziffern vor dem Komma. In den fortgeschrittenen Einstellungen kann konfiguriert werden, ob Ziffern in 2er-, 3er, oder 4er-Gruppen gruppiert werden.
DezimaltrennerDas Trennzeichen für die Dezimalstellen.
EinheitDie Einheit der Zahl. In den fortgeschrittenen Einstellungen kann konfiguriert werden, ob die Einheit außerhalb des Eingabefelds oder innerhalb des formatierten Werts stehen soll. Zudem kann festgelegt werden, ob die Einheit vor oder nach dem Wert stehen soll. 


Fortgeschrittene Einstellungen


Einstellung
Beschreibung
Einheit im WertGibt an, ob die Einheit innerhalb des formatierten Werts oder außerhalb des Eingabefelds stehen soll.
Position EinheitGibt an, ob die Einheit vor oder nach der Zahl stehen soll.
ZifferngruppenGibt an, ob Ziffern in 2er-, 3er- oder 4er-Gruppen gruppiert werden sollen. Verschiedene Kulturräume bevorzugen verschiedene Gruppierungen.
Nullen am AnfangGibt an, wie mit Nullen am Anfang einer Zahl umgegangen werden soll. Nullen können entweder verboten werden, erlaubt und bewahrt werden; oder erlaubt aber 
Nullen am EndeGibt an, wie mit Nullen am Ende einer Zahl umgegangen werden soll. Nullen können entweder immer entfernt oder immer hinzugefügt werden; oder nur angezeigt werden, wenn die Zahl keine Ganzzahl ist.
Zeichen negativDas Vorzeichen, welche für negative Zahlen verwendet werden soll. Standardmäßig ein Minuszeichen.
Mit pos. ZeichenGibt an, ob bei positiven Zahlen ein Vorzeichen (Plus-Zeichen) angezeigt werden soll.
Ort VorzeichenGibt an, an welcher Stelle das Vorzeichen stehen soll. Das Vorzeichen kann entweder ganz am Anfang bzw. ganz am Ende stehen; oder vor bzw. nach der Einheit.
Wenn kein WertGibt das Verhalten an, wie vorgegangen wird, wenn im Eingabefeld kein Wert steht. Mögliche Optionen sind: (1) Feld wird leer gehalten, (2) es wird nur die Einheit angezeigt, (3) es wird eine 0 mit der Einheit angezeigt, (4) Feld wird leer angezeigt und beim Fokus (Klick in Feld) wird nur die Einheit angezeigt.
RundungsweiseGibt an, wie gerundet werden soll, wenn der tatsächliche Wert mehr Kommastellen erfordert als erlaubt.


Datentyp Regulärer Ausdruck

Wird als Datentyp regulärer Ausdruck ausgewählt, kann eine eigene Regexp für die Validierung verwendet werden. Zudem kann auch ein Fehlertext eingegeben werden.

Ist der Datentyp "Regulärer Ausdruck" ausgewählt, kann eine eigene Regexp für die Validierung des Textfelds eingegeben werden. Wenn die Regexp auf den aktuellen Wert des Textfelds passt, wird es also gültig betrachtet. Andernfalls wird die eingestellte Fehlernachricht angezeigt. Die Regexp wird als JavaScript Regexp ausgewertet und muss ohne den Schrägstrich (/) am Anfang und Ende eingegeben werden.

Im folgenden einfachen Beispiel wird geprüft, dass wenigstens eines der Wörter Apfel oder Bananen vorkommen.

\b(Apfel|Banane)\b

In den meisten Fällen will man aber gegen den ganzen Wert des Textfelds prüfen. In diesem Fall müssen die Anker ^ (passt auf den Anfang) und $ (passt auf das Ende) benutzt werden:

^[a-zA-Z][a-zA-Z\d]{3,15}$

Die obige Regexp prüft auf gültige Nutzernamen, die 4 bis 16 Zeichen lang sein müssen, nur Buchstaben und Zahlen enthalten dürfen sowie mit einem Buchstaben anfangen müssen.


Serverseitige Validierung

Durch Aktivierung der serverseitigen Validierung werden die Daten zusätzlich vom Server geprüft, um Manipulationen ausschließen zu können.

Standardmäßig werden die Daten nur clientseitig im Browser des Nutzers mittels JavaScript validiert. Dies bedeutet, dass jemand mit nötigen technischen Fachkenntnissen etwa ein Formular absenden kann, was eine ungültige E-Mail-Adresse enthält. Wenn es erforderlich ist, sicherzustellen, dass Nutzer keine ungültigen Daten einreichen können, kann die serverseitige Validierung aktiviert werden. Nach dem Absenden werden dann die Daten auf dem Server geprüft. Sind diese ungültig, wird der Formulareingang abgelehnt und der Nutzer erhält eine entsprechende Fehlermeldung. Für jedes Formularelement kann separat festgelegt werden, ob es serverseitig validiert werden soll.

Die serverseitige Validierung ist nur möglich für die Eigenschaften, welche über die grafische Oberfläche konfigurierbar sind. Falls eigene Logik oder Validaten über JavaScript erstellt wurden, können, wird dies bei der serverseitigen Validierung nicht berücksichtigt. Wenn speziell Validatoren (wie weiter unten erläutert) überschrieben werden, darf die serverseitige Validierung nicht aktiviert werden.


Eigene Validierungsfunktionen

Durch Hinzufügen einer Validierungsfunktion können eigene Regeln zur Prüfung von Formularelementen erstellt werden.

Für komplexe Anwendungsfälle kann es notwendig sein, eigene JavaScript-Logik zur Validierung zu schreiben. Hierzu steht die Funktion errorFunc zur Verfügung. Für ein Formularfeld wird eine JavaScript-Funktion definiert, welche prüft, ob das Feld gültig ist und im Fehlerfall eine Fehlernachricht zurückliefert:

$('[name="tfEmail"]').errorFunc(function(){
  // Der Datentyp des Felds 'tfEmail' wurde auf 'E-Mail' gesetzt.
  // Wir fügen eine zusätzliche Bedingung hinzu: Der Host muss entweder 'example.com' oder 'example.de' lauten.
  const value = String(this.val() || "");
  const hostIndex = value.indexOf("@");
  const host = hostIndex >= 0 ? value.substr(hostIndex + 1) : "";
  if (host === "example.com" || host === "example.de") return "";
  return "Der Host muss entweder example.de oder example.com lauten!";
});


Plugins

Schließlich ist es auch möglich, Validatoren über Java-Plugin zu FORMCYCLE hinzuzufügen. Nach der Installation des Plugins sind diese als Datentype auswählbar. Entwickler finden hier die Erläuterung zu diesem Plugin-Typ.


Überschreiben von vorhandenen Validatoren

Hinzufügen eines neuen Validators im globalen Objekt XM_FORM_VRULES. Es muss noch das HTML-Attribut vdt des Elements auf den Namen des Validators gesetzt werden. Überschreiben eines vorhandenen Validators.

Das Überschreiben von Validatoren ist eine veraltete Funktion und sollte nicht mehr genutzt werden. Dies dient auch der besseren Wartbarkeit. Stattdessen kann entweder der Datentyp regexp verwendet werden oder ein eigener Validator über jQuery.fn.errorfunc oder Plugins hinzugefügt werden.


Es ist möglich, vorhandene Validatoren zu überschreiben. Die Validatoren sind reguläre Ausdrücke und befinden sich im JavaScript-Objekt window.XM_FORM_VRULES. Zudem finden sich im JavaScript-Objekt window.XM_FORM_I18N die dazugehörigen Fehlernachrichten. Per JavaScript können diese Objekte modifiziert werden.

Um etwa den Validator für einen Geldbetrag so zu ändern, dass statt einem Komma ein Punkt als Trennzeichen akzeptiert wird, kann folgender Code zum Überschreiben benutzt werden:

XM_FORM_VRULES.money = /^-{0,1}([0]{1}|[1-9]{1}[0-9]*)[.]{1}[0-9]{2}$/;
XM_FORM_I18N.money = "Bitte verwenden Sie als Trennzeichen einen Punkt (z.B. 100.00)";

Zudem ist es auch möglich, in den Objekten XM_FORM_VRULES und XM_FORM_I18N eigene Einträge einzufügen. Um diesen Validator an einem Textfeld zu verwenden, muss dem Textfeld der entsprechende Wert für das HTML-Attribut vdt gegeben werden. 

Beispielsweise kann wie folgt ein Validator für Zahlen mit maximal fünf Stellen und zwei Nachkommastellen erstellt werden:

  XM_FORM_VRULES.number_5_2 = /^(0|[1-9]\d{0,4}),\d\d$/;
  XM_FORM_I18N.number_5_2 = "Bitte geben Sie eine Fließkommazahl ein mit 2 Nachkommastellen und maximal 5 Stellen vor dem Komma";

Der neue Validator hat also den Namen number_5_2. Dieser Name muss als Wert des Attributs vdt dem Textfeld gegeben werden.

War dieser Artikel hilfreich?

Das ist großartig!

Vielen Dank für das Feedback

Leider konnten wir nicht helfen

Vielen Dank für das Feedback

Wie können wir diesen Artikel verbessern?

Wählen Sie wenigstens einen der Gründe aus
CAPTCHA-Verifikation ist erforderlich.

Feedback gesendet

Wir wissen Ihre Bemühungen zu schätzen und werden versuchen, den Artikel zu korrigieren