Interface JQuery

Derzeit wird hierzu ein SPAN-Element mit der Klasse required-star erzeugt, dies kann sich ändern:

<span class="required-star">*</span>

Zum Beispiel:

// Adds a star to the label of the form field tf1.
$('input[name="tf1"]').addStar();

Diese Funktion ändert nur das das Aussehen, aber nicht, ob das Formularfeld ein Mussfeld ist. Um festzulegen, ob ein Feld Mussfeld ist, kann die Funktion setRequired verwendet werden.

autoNumeric ist eine JavaScript-Bibliothek zur Eingabe von Zahlen in länderspezifischen Formaten. Diese Bibliothek ist bereits in FORMCYCLE eingebunden, sodass sie in Formularen direkt genutzt werden kann. Auf der offiziellen Webseite findet sich eine ausführliche Erklärung.

Zuerst wird ein Eingabefeld mit jQuery selektiert, dann werden die Optionen an autoNumeric wie folgt übergeben:

$("[name=tfGewicht]").autoNumeric("init", {
  aDec: ',', //Komma als Dezimalseparator
  aSep: '', // kein Trennzeichen für Tausender
  aSign: ' kg', // Einheit kg
  pSign: 's', // Einheit nach der Zahl
  vMin: 1, // Mindestwert 1
  vMax: 100, // Höchstwert 100
  mDec: 3, // Maximal 3 Dezimalstellen
  aPad: false // Es können auch weniger als 3 Dezimalstellen sein.
  // weitere Optionen...
});

Im Textfeld tfGewicht kann der Nutzer nun z.B. 3,99 eingeben, dies wird als 3,99 kg angezeigt. autoNumeric stellt sicher, dass es sich um eine gültige Zahl ist.

Einige oft verwendete Einstellungen sind:

• aDec: Dezimaltrennzeichen
• aSep: Trennzeichen für Tausender
• aSign: Einheit der Zahl, etwa EUR oder ¥.
• pSign: Ob die Einheit am Ende (Wert s) oder am Anfang (Wert p) steht
• vMin: Geringster erlaubter Zahlenwert
• vMax: Größter erlaubter Zahlenwert
• mDec: Höchstanzahl von Dezimalstellen
• aPad: Ob immer auf die angegebene Anzahl von Dezimalstellen mit Nullen aufgefüllt wird

Es sei angemerkt, dass die Optionen statt per JavaScript auch als HTML-Data-Attribute an dem Eingabefeld übergeben werden können:

<input id="money-field"
    data-a-dec=","
    data-a-sign="kg"
    data-v-min="1"
    data-v-max="100"
    data-m-dec="3"
>

Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus einer Datenbankabfrage genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.

Die Datenbankabfrage wird asynchron über AJAX ausgeführt. Datenbankabfragen können im Backend von XIMA FORMCYCLE konfiguriert werden.

Der gegebene Datenbankspaltenname wird als Anzeigetext der Option genommen; und auch als der Wert, der beim Absenden des Formulars mitgesendet wird. Diese Funktion beschränkt die Datenbankabfrage auf diese Spalte. Somit wird die Menge der zu übertragenden Daten reduziert. Dies beschleunigt den Vorgang bei großen Datenbanktabellen.

Die Datenbankabfrage muss genau einen Parameter in Form eines Fragezeichens (?) besitzen. Dieser Parameter wird mit dem Text ersetzt, den der Nutzer bisher in das Eingabefeld eingegeben hat. Es müssen hierbei keine Anführungszeichen oder Maskierungszeichen verwendet werden. Die Datenbankabfrage wird als vorbereitete Anweisung ausgeführt.

Beispiel Länder

Angenommen, es wurde im Backend eine Datenbankabfrage mit dem Namen LandNamen angelegt. Die Abfrage könnte etwa wie folgt aussehen:

SELECT code, de FROM demo.countries where de like concat('%',?,'%');

Um nun diese Abfrage mit dem Eingabefeld namens tfLand zu nutzen:

$('[name="tfLand"]').autocompleteDB("LandNamen", "de");

Wenn der Nutzer nun den Text An eingibt, liefert die Datenbankabfrage alle Länder zurück, die mit An beginnen. Diese werden dem Nutzer als mögliche Vorschläge angezeigt: Andorra, Angola, Anguilla, Antarktika, Antigua und Barbuda.

Beispiel mit Rückruffunktion

function codeSetzen(event, ui){
  $('[name=tfLandercode]').val(ui.item.code)
}
$('[name=tfLander]').autocompleteDB("LandNamen", "de", codeSetzen);

Wie im oberen Beispiel wird die Autovervollständigung initialisert. Zusätzlich wird noch bei Auswahl einer Option aus der Länderliste aber noch eine weitere Funktion ausgeführt werden. In dieser Funktion wird nun auf das ausgewählte Element zugegriffen (ui.item) und der Wert der Spalte code ausgelesen (ui.item.code). Dieser Wert entspricht dem Wert aus der Spalte code aus der Datenbankabfrage der Länder. Schließlich wird dieser Ländercode in ein Textfeld mit dem Namen tfLandercode für die weitere Verarbeitung geschrieben.

Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus einer Datenbankabfrage genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.

Die Datenbankabfrage wird asynchron über AJAX ausgeführt. Datenbankabfragen können im Backend von XIMA FORMCYCLE konfiguriert werden.

Es können zwei Datenbankspaltennamen angegeben werden. Die eine Spalte wird als Anzeigetext der Option genommen. Die andere Spalte wird verwendet als der Wert, der beim Absenden des Formulars mitgesendet wird. Diese Funktion beschränkt die Datenbankabfrage auf diese beiden Spalten. Somit wird die Menge der zu übertragenden Daten reduziert. Dies beschleunigt den Vorgang bei großen Datenbanktabellen.

Die Datenbankabfrage muss wenigstens einen Parameter in Form eines Fragezeichens (?) besitzen. Dieser Parameter wird mit dem Text ersetzt, den der Nutzer bisher in das Eingabefeld eingegeben hat. Es müssen hierbei keine Anführungszeichen oder Maskierungszeichen verwendet werden. Die Datenbankabfrage wird als vorbereitete Anweisung ausgeführt. Enthält die Abfrage weitere Parameter, müssen für diese Werte an diese Funktion übergeben werden. Andernfalls schlägt die Abfrage fehl.

Beispiel Länder

Angenommen, es wurde im Backend eine Datenbankabfrage mit dem Namen LandNamen angelegt. Die Abfrage könnte etwa wie folgt aussehen:

SELECT code, de FROM demo.countries where de like concat('%',?,'%');

Um nun diese Abfrage mit dem Eingabefeld namens tfLand zu nutzen:

$('[name="tfLand"]').autocompleteDB("LandNamen", "de");

Wenn der Nutzer nun den Text An eingibt, liefert die Datenbankabfrage alle Länder zurück, die mit An beginnen. Diese werden dem Nutzer als mögliche Vorschläge angezeigt: Andorra, Angola, Anguilla, Antarktika, Antigua und Barbuda.

Beispiel mit Rückruffunktion

function codeSetzen(event, ui){
  $('[name=tfLandercode]').val(ui.item.code)
}
$('[name=tfLander]').autocompleteDB("LandNamen", "de", codeSetzen);

Wie im oberen Beispiel wird die Autovervollständigung initialisert. Zusätzlich wird noch bei Auswahl einer Option aus der Länderliste aber noch eine weitere Funktion ausgeführt werden. In dieser Funktion wird nun auf das ausgewählte Element zugegriffen (ui.item) und der Wert der Spalte code ausgelesen (ui.item.code). Dieser Wert entspricht dem Wert aus der Spalte code aus der Datenbankabfrage der Länder. Schließlich wird dieser Ländercode in ein Textfeld mit dem Namen tfLandercode für die weitere Verarbeitung geschrieben.

Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus einem LDAP (Lightweight Directory Access Protocol) genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.

Die LDAP-Abfrage wird asynchron über AJAX ausgeführt. LDAP-Abfrage können im Backend von XIMA FORMCYCLE konfiguriert werden.

Die gegebene LDAP-Eigenschaft wird als Anzeigetext der Option genommen; und auch als der Wert, der beim Absenden des Formulars mitgesendet wird. Diese Funktion beschränkt die LDAP-Abfrage auf diese Eigenschaft. Somit wird die Menge der zu übertragenden Daten reduziert und der Vorgang beschleunigt.

Die LDAP-Abfrage muss genau einen Parameter in Form eines Fragezeichens (?) besitzen. Dieser Parameter wird mit dem Text ersetzt, den der Nutzer bisher in das Eingabefeld eingegeben hat.

Beispiel

Angenommen, es wurde im Backend eine LDAP-Abfrage mit dem Namen Angestellte angelegt. Die Abfrage könnte etwa wie folgt aussehen:

BaseDN: ou="employees", ou="company", dc="company", dc="com"
Query : (userPrincipalName=*?*)

Um nun diese Abfrage mit dem Eingabefeld namens tfAngestellte zu nutzen:

$('[name="tfAngestellte"]').autocompleteLDAP("Angestellte", "name.full");

Wenn der Nutzer nun den Text Peter eingibt, liefert die LDAP-Abfrage alle Angestellten zurück, deren Name Peter enthält. Diese werden dem Nutzer als mögliche Vorschläge angezeigt: Peter Müller, Peter Schmidt, Peter Fischer, Peter Weber.

Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus einem LDAP (Lightweight Directory Access Protocol) genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.

Die LDAP-Abfrage wird asynchron über AJAX ausgeführt. LDAP-Abfrage können im Backend von XIMA FORMCYCLE konfiguriert werden.

Es können zwei LDAP-Eigenschaften angegeben werden. Die eine Eigenschaft wird als Anzeigetext der Option genommen. Die andere Eigenschaft wird verwendet als der Wert, der beim Absenden des Formulars mitgesendet wird. Diese Funktion beschränkt die Datenbankabfrage auf diese beiden Eigenschaften. Somit wird die Menge der zu übertragenden Daten reduziert. Dies beschleunigt den Vorgang bei großen Datenbanktabellen.

Die LDAP-Abfrage muss wenigstens einen Parameter in Form eines Fragezeichens (?) besitzen. Dieser Parameter wird mit dem Text ersetzt, den der Nutzer bisher in das Eingabefeld eingegeben hat. Enthält die Abfrage weitere Parameter, müssen für diese Werte an diese Funktion übergeben werden. Andernfalls schlägt die Abfrage fehl.

Beispiel

Angenommen, es wurde im Backend eine LDAP-Abfrage mit dem Namen Angestellte angelegt. Die Abfrage könnte etwa wie folgt aussehen:

BaseDN: ou="employees", ou="company", dc="company", dc="com"
Query : (userPrincipalName=*?*)

Um nun diese Abfrage mit dem Eingabefeld namens tfAngestellte zu nutzen:

$('[name="tfAngestellte"]').autocompleteLDAP("Angestellte", "name.full", "accountName");

Wenn der Nutzer nun den Text Peter eingibt, liefert die LDAP-Abfrage alle Angestellten zurück, deren Name Peter enthält. Diese werden dem Nutzer als mögliche Vorschläge angezeigt: Peter Müller, Peter Schmidt, Peter Fischer, Peter Weber. Angezeigt werden dem Nutzer Vor- und Nachname der Angestellten, beim Absenden wird der Name des jeweiligen Nutzerkontos übertragen.

Das Formularfeld wird nach dem Leeren nicht validiert. Falls es sich um ein Mussfeld handelt, wird daher keine Fehlermeldung angzeigt. Die Validierung kann mittels der Funktion validate angestoßen werden.

// Setzt den Wert des Eingabefelds "tf1" auf "Hallo Welt!"
// Dies geschieht normalerweise durch den Nutzer
$('[name="tf1"').val("Hallo Welt!") ;

// Löscht den eingebenen Text
$('[name="tf1"').clear();

// Validiert das Textfeld. Falls es ein Mussfeld ist, wird nun eine Fehlernachricht angezeigt.
$('[name="tf1"').validate();

Im Designer kann die Autovervollständigung für Auswahlfelder auch direkt über die Oberfläche aktiviert werden. Rechts im Eigenschaftsbereich unter Grundeinstellungen kann dazu die entsprechende Checkbox aktiviert werden.

Das Auswahlfeld wird in ein Texteingabefeld umgewandelt. Während der Nutzer nun Text eingibt, wird ihm automatisch eine Liste mit in Frage kommenden Möglichkeiten angezeigt. Derzeit wird für diese Funktionalität das jQueryUI-Widget autocomplete verwendet.

// Wandelt das Auswahlfeld "sel1" in ein Eingabefeld mit Autovervollständigung um.
$('[name="sel1"]').cob2auto();

Um wiederholte erzeugte Elemente zu selektieren, sollte das Attribut org_name statt name verwendet werden.

// Schaltet Formularfeld "tfMail" wiederholbar
$("[name="tfMail"").dynamic();

// Zugriff auf den Wert des ersten wiederholten Elements.
$("[org_name="tfMail"").first().val();

Jedes einzelne wiederholbare Element befindet sich in einem DIV-Container mit der Klasse dynamic-row. Dieser Container wird an die Rückruffunktionen afterAdd, afterDel, beforeAdd, beforeDel und changeRowSize übergeben.

Falls Formularfelder über JavaScript initialisiert werden sollen, z.B. mit der Funktion cob2auto oder errorFunc, kann die Initialisierung erst erfolgen, nachdem das Formularfeld wiederholbar erzeugt wurde. Dies kann wie folgt geschehen:

// Auswahl mit allen Personen wiederholbar schalten
$('[name="selPersonen"]').dynamic({
  // Rückrüffunktion, wenn ein neues Element erzeugt wurde
  afterAdd: function(_, item) {
    // Das eigentliche Formularelement im DIV-Container selektieren
    var element = item.find('.XItem');
    // Nun kann das Element initialisiert werden, z.B.
    element.cob2auto();
  }
});

Elemente können auch direkt im Designer wiederholbar geschaltet werden. Dies geschieht unter den Grundeigeschaften des Eigenschaftsbereichs eines Elements. Dort können auch die Mindestzahl und Höchstzahl wiederholbarer Elemente sowie ein Auslösungselement (trigger) eingestellt werden. Für fortgeschrittene Anwendungsfälle können Elemente über JavaScript mit dieser Method wiederholbar geschaltet werden.

// Formularelement "tfMail" wiederholbar schalten
$("[name='tfMail']").dynamic();
// ...
// Ein weiteres E-Mail-Eingabefeld erzeugen
$("[name='tfMail']").dynamic("addRow");

// Formularelement "tfMail" dynamisch schalten
$("[name='tfMail']").dynamic();
// ...
// Das letzte E-Mail-Eingabefeld entfernen
$("[name='tfMail']").dynamic("removeRow");

// Formularelement "tfMail" wiederholbar schalten
$("[name='tfMail']").dynamic({minSize: 3});

// Anzahl der Wiederholung ist initial 3
var repetitions = $("[name='tfMail']").dynamic("getRowSize");

// Schalte Formularfeld "tfMail" wiederholbar
$("[name='tfMail']").dynamic();

// Setze die Anzahl an wiederholten Formularelementen auf 5.
$("[name='tfMail']").dynamic("setRowSize", 5);

Die Funktion setError markiert ein Formularfeld nur als ungültig, zeigt aber nicht sofort eine Fehlermeldung an. Die Fehlermeldung wird erst angezeigt, wenn der Nutzer mit dem Formularfeld interagiert (blur oder change) beziehungsweise versucht, das Formular abzuschicken. Um die Fehlermeldung sofort anzuzeigen, kann die Funktion validate benutzt werden. Diese Funktion erleichert dieses Vorgehen und zeigt sofort eine Fehlermeldung an.

// Schreibt die Fehlermeldung "Ungültiger Wert" an das Element "tfIdNummer"
$('[name=tfIdNummer').error("Ungültiger Wert");

Die Funktion setError markiert ein Formularfeld nur als gültig, entfernt aber nicht sofort die Fehlermeldung. Die Fehlermeldung wird erst entfernt, wenn der Nutzer mit dem Formularfeld interagiert (blur oder change) beziehungsweise versucht, das Formular abzuschicken. Um die Fehlermeldung sofort zu entfernen, kann die Funktion validate benutzt werden. Diese Funktion erleichert dieses Vorgehen und entfernt sofort die Fehlermeldung an.

// Entfernt die Fehlermeldung vom Element "tfIdNummer"
$('[name=tfIdNummer').error();

Die Validierungsfunktion wird jedesmal aufgerufen, wenn sich der Wert des Formularfelds geändert hat oder eine Validierung erforderlich ist, etwa beim Absenden des Formulars.

Sind mehere Validierungsfunktionen festgelegt, so werden alle Validierungsfunktionen bei der Validierung aufgerufen und alle Fehlermeldungen angezeigt.

Es ist zu beachten, dass zwischen Mussfelder und Datenvalidierung unterschieden wird. Hat ein Mussfeld keinen Wert, ist das Formularfeld ungültig. Erst wenn in einem Mussfeld ein Wert eingetragen wurde, wird die Datenvalidierung gestartet und geprüft, ob die eingegebenen Daten gültig sind. Die Validierungsfunktion wird erst während der Datenvalidierung aufgerufen. Hat ein Mussfeld also keinen Wert, wird immer eine Fehlermeldung angezeigt, unabhängig der festgelegten Validierungsfunktionen.

// 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.
$('[name="tfEmail"]').errorFunc(function() {
  var value = String(this.val() || "");
  var hostIndex = value.indexOf("@");
  var 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!";
});

Container-Elemente sind DIV-Elemente mit der CSS-Klasse xm-item-div. Zudem hat ein Container-Element das Attribute xn mit dem Namen des Formularelements.

Für ein Texteingabeld namens tfName liefert $("[name='tfName']") etwa das folgende HTML-Element zurück

<input id="xi-tf-16" name="tfName" class="XItem XTextField" title type="text">

Und das Suchen des Containers mittels $("[name='tfName']").getContainer() liefert etwa folgendes HTML-Element:

<div class="xm-item-div label-top" cn="XTextField" xi="xi-tf-16" xn="tfName">
  ...
  <input id="xi-tf-16" name="tfName" class="XItem XTextField" title type="text">
  ...
</div>

// Liefert vom Eingabefeld "tfMail" den Text des Labels zurück, z.B. "Ihre E-Mail-Addresse"
$('[name=tfMail').getLabel().text();

// Liefert von einem wiederholten Element "tfAngestellte" den Text des
// zweiten Labels zurück, z.B. "Name des 2. Angestellten"
$($('[org_name=tfAngestellte]').get(1)).getLabel().text();

Falls etwa folgendes HTML vorliegt:

<input name="tfMail" placeholder></input>

Dann verhält sich diese Funktion wie folgt:

$("[name='tfMail']").hasAttr("name"); // true
$("[name='tfMail']").hasAttr("placeholder"); // true
$("[name='tfMail']").hasAttr("id"); // false

Erlaubt die Registrierung einer globalen Rückruffunktion, wenn ein neues wiederholbares Element erzeugt wurde. Ein wiederholbares Element erlaubt dem Nutzer, eine oder mehrere Kopien zu erzeugen, etwa zur Eingabe von mehreren E-Mail-Adressen.

Im Gegensatz zur Rückruffuntkion, die mittels dynamic registriert werden kann, wird diese Rückruffunktion global für jedes dynamische Formularfeld im Formular aufgerufen. Das ist etwa nützlich, wenn ein Element über den Designer wiederholbar geschaltet wird und nicht direkt mittels JavaScript.

// Neu hinzugefügte Formularfelder mit cob2auto initialisieren (Autovervollständigung)
$('FORM.xm-form').on("addRow", function(_, data) {
  data.container.find(".XSelect").cob2auto();
});

Erlaubt die Registrierung einer globalen Rückruffunktion, wenn ein wiederholbares Element entfernt wurde. Ein wiederholbares Element erlaubt dem Nutzer, eine oder mehrere Kopien zu erzeugen, etwa zur Eingabe von mehreren E-Mail-Adressen.

Im Gegensatz zur Rückruffuntkion, die mittels dynamic registriert werden kann, wird diese Rückruffunktion global für jedes wiederholbare Formularfeld im Formular aufgerufen. Das ist etwa nützlich, wenn ein Element über den Designer wiederholbar geschaltet wird und nicht direkt mittels JavaScript.

// Beim Entfernen eines Elements die Versandkosten neu berechnen
$('FORM.xm-form').on("delRow", function(_, data) {
  recalculateVersandkosten();
});

Derzeit ist dieses Sternchen mittels eines SPAN-Elements mit der Klasse required-star umgesetzt, dies kann sich allerdings ändern.

<span class="required-star">*</span>

Beispiel:

// Entfernt das Sternchen vom Leittext des Formularfelds "tfName".
$('input[name=tfName]').removeStar();

Diese Funktion beeinflusst nur das Aussehen, ändert aber nicht, ob das Formularfeld ein Mussfeld ist. Ist das Eingabefeld leer, werden daher weiter Fehlermeldungen angezigt. Um zu ändern, ob das Feld ein Mussfeld ist, sollte die Funktion setRequired benutzt werden.

Es können etwa $.xutil.getFormParam und JQuery-Methoden wie $.fn.text genutzt werden, um Daten aus URL-Parametern in das Formular einzufügen.

Ersetzt im HTML eines Formularelement (innerHTML) Ausdrücke einer bestimmten Form mit Werten aus den URL-Parametern der aktuellen URL, über die das Formular aufgerufen wurde.

Ausdrücke der folgenden Form, wobei KEY für den Namen des URL-Parameters steht, werden ersetzt:

{KEY}

Für jeden URL-Parameter wird das erste Auftreten obigen Ausdrucks durch den Wert des URL-Parameters KEY ersetzt. Angenommen, ein Formular wird aufgerufen über die URL

http://localhost/formcycle/form/provide/1?name=Welt

Im Formular gibt es ein Textfeld mit dem Namen tfGruss und dem Label Hello, {name}!:

// Ersetzt im innerHTML-String des div-Container-Elements "{name}" durch "{world}".
$("[xn='tfGruss']").replaceParams();

Somit lautet das Label des Eingabefelds nun Hallo, Welt!.

deprecated

Diese Methode ist veraltet und sollte nicht mehr benutzt werden, dass sie Formular anfällig für XSS-Angriffe (cross-site scripting) macht.

• dateDE: Erlaubt nur Datumsangaben nach dem deutschen Format (TT.MM.JJJJ), z.B. 22.05.1990.
• email: Erlaubt nur gültige (internationale) E-Mail-Adressen, z.B. james@john.org or θσερ@εχαμπλε.ψομ.
• integer: Erlaubt nur Ganzzahlen, also Zahlen ohne Komma, z.B. 3, 0 oder -21.
• ipv4: Erlaubt nur gültige IP4-Adressen, z.B. 127.0.0.1 oder 10.42.42.13.
• money: Erlaubt nur gültige Geldbeträge, also Zahlen mit genau zwei Nachkommastellen, z.B. 2,00, -3,95, 0,00 oder 897345,38.
• number: Erlaubt nur Zahlen, mit oder ohne Komma. Z.B: 0.03, -99.2 oder 42.
• onlyLetterNumber: Erlaubt nur Buchstaben, Zahlen und Leerzeichen.
• onlyLetterSp: Erlaubt nur Buchstaben und Leerzeichen.
• phone: Erlaubt nur gültige Telefonnummern, z.B. 0234995483 oder +49 351 4459654.
• plzDE: Erlaubt nur gültige deutsche Postleitzahlen, also genau fünf Ziffern, z.B. 02349. Prüft nicht, ob es solch eine Postleitzahl tatsächlich in Deutschland gibt.
• posinteger: Erlaubt nur positive Ganzzahlen, z.B. 0, 3 oder 123.
• posmoney : Erlaubt nur gültige, positive Geldbeträge mit genau zwei Nachkommastellen, z.B. 0,00 oder 2,34.
• posmoneyOptionalComma: Erlaubt nur gültige, positive Geldbeträge, mit oder ohne Nachkommastellen, z.B. 0,00, 0, 3,4 oder 3.
• regexp: Erlaubt es dem Formularersteller, einen eigenen regulären Ausdruck füri die Validierung einzugeben.
• text: Wendet keine Einschränkungen an und erlaubt jede Eingabe.
• time: Erlaubt nur gültige Zeitangaben in dem Format hh:mm, z.B. 22:05 or 03:42.
• url: Erlaubt nur gültige URLs, welche das Protokoll enthalten müssen, z.B. http://example.com oder https://www.james.org.

Beispiel:

// Prüft nun, ob eine gültige E-Mail-Adresse eingegeben wurde.
$('[name="tfMail"').setDataType("email")

Beim Datentyp date wird ein Kalender zur Auswahl des Datums angezeigt. Wenn der Datentyp auf ein Datum gesetzt wurde und nun der Datentyp per JavaScript geändert wird, erscheint immer noch ein Kalender. Wenn der Datentyp im Designer auf einen anderen Wert gesetzt wurde und nun per JavaScript auf ein Datum geändert wird, erscheint kein Kalender. Falls notwendig, muss hier direkt jQuery.fn.datepicker gerufen werden.

Der Datentyp kann auch direkt im XIMA FORMCYCLE-Designer eingestellt werden.

Derzeit werden die HTML-Attribute type und vdt genutzt, dies wird sich allerdings ändern.

Beispiel:

// Prüft nun nicht mehr, ob eine gültige E-Mail-Adresse eingegeben wurde.
$('[name="tfMail"').setDataType()

Die Fehlermeldung erscheint nicht sofort. Erst, wenn der Nutzer mit dem Formularfeld interagiert, wird die Fehlermeldung angezeigt, etwa bei einem blur- oder change-Ereignis; oder wenn das Formular wie beim Absenden validiert wird. Mittels der Funktion validate kann die Validierung angestoßen werden, um die Fehlermeldung sofort anzuzeigen.

// Markiert das Eingabefeld als ungültig und setzt die Fehlermeldung.
$('[name="tfName"').setError("Ungültiger Name.");
// Validiert das Eingabefeld und zeigt die Fehlermeldung an.
$('[name="tfName"').validate();

Derzeit wird das HTML-Attribut error genutzt, dies kann sich aber ändern.

Die Fehlermeldung verschwindet nicht sofort. Erst, wenn der Nutzer mit dem Formularfeld interagiert, wird die Fehlermeldung entfernt, etwa bei einem blur- oder change-Ereignis; oder wenn das Formular wie beim Absenden validiert wird. Mittels der Funktionvalidate` kann die Validierung angestoßen werden, um die Fehlermeldung sofort zu entfernen.

Diese Funktion ändert nicht, ob das Formularelement selbst ein Mussfeld ist, zum Beispiel:

Das Formularfeld tf1 wurde bereits im Designer als Mussfeld markiert, das Feld tf2 nicht. Nun wird diese Funktion benutzt, um die Mussfeldgruppe beider Felder auf "Gruppe1" zu setzen. Ist das Feld tf1 noch leer, so wird eine Fehlermeldung angezeigt, auch wenn im Feld tf2 ein Wert eingetragen wurden. Daher sollte im Designer das Feld tf1 nicht als Mussfeld markiert werden. Sonst muss dies nachträglich mittels der Funktion setRequired nachgeholt werden:

// Fügt Textfeld "tf1" der Mussfeldgruppe "gruppe1" hinzu.
$('[name=tf1]').setGroupReq("gruppe1");

// Fügt Textfeld "tf2" der Mussfeldgruppe "gruppe1" hinzu.
$('[name=tf2]').setGroupReq("gruppe1");

// Entfernt die Markierung von Textfeld "tf1" als Mussfeld.
$('[name=tf1]').setRequired(false);

Die Mussfeldgruppe kann auch direkt im XIMA FORMCYCLE-Designer gesetzt werden.

Derzeit nutzen Mussfeldgruppen das HTML-Attribut vgr, dies wird sich allerdings ändern.

Falls das Formularfeld zudem als Mussfeld markiert werden soll, kann die Funktion setRequired genutzt werden.

Dieses Grenze kann auch direkt im XIMA FORMCYCLE-Designer gesetzt werden.

// Es können nun höchstens drei Checkboxen am Feld "selTermine" angehakt werden.
$('[name=selTermine').setMaxCheckBox(3)

Derzeit wird das HTML-Attribut `vcmx genutzt, dies wird sich allerdings ändern.

// Der Nutzer darf nicht mehr als neun Zeichen im Feld "tfId" eingeben.
$('[name="tfId"').setMaxLength(9)

Die Höchstlänge kann auch direkt im XIMA FORMCYCLE-Designer geändert werden.

Derzeit wird das HTML-Attribut vmxl genutzt, dies wird sich allerdings ändern.

// Im Feld "tfAnzahl" muss eine Zahl kleiner oder gleich 9 eingegeben werden.
$('[name="tfAnzahl"').setMaxValue(9);

Der Höchstwert kann auch direkt XIMA FORMCYCLE-Designer gesetzt werden.

Derzeit wird das HTML-Attribut vmx genutzt, dies kann sich aber ändern.

// Wenigstens eine Checkbox muss am Auswahlfeld "selTermine" ausgewählt werden.
$('[name=selTermine').setMinCheckBox(1);

Die Mindestanzahl kann auch direkt im XIMA FORMCYCLE-Designer gesetzt werden.

Derzeit wird das HTML-Attribut vcmn genutzt, dies wird sich allerdings ändern.

// Der Nutzer muss wenigstens zwei Zeichen in das Eingabefeld "tfId" eingeben.
$('[name="tfId"').setMinLength(2);

Die Höchstlänge kann auch direkt im XIMA FORMCYCLE-Designer geändert werden.

Derzeit wird das HTML-Attribut vmnl genutzt, dies wird sich allerdings ändern.

// Im Feld "tfAnzahl" muss ein Wert größer oder gleich zwei eingegeben werden.
$('[name="tfAnzahl"').setMinValue(2);

Diese Untergrenze kann auch direkt im XIMA FORMCYCLE-Designer eingestellt werden.

Derzeit wird das HTML-Attribut vmn genutzt, dies wird sich allerdings ändern.

Gibt es beispielsweise die beiden Formularfeld "tfNutzername" und "tfNutzernameWiederholung", so wird ein Fehler angezeigt, wenn im Feld "tfNutzernameWiederholung" ein anderer Wert eingegeben wird als im Feld "tfNutzername".

// Wiederholung der E-Mail muss gleich der eingegebenen E-Mail sein
$('[name=tfMailWdh]').setMustEqual("tfMail");

Diese Einstellung kann auch direkt im XIMA FORMCYCLE-Designer festgelegt werden.

Derzeit wird das HTML-Attribut veq verwendet, dies wird sich allerdings ändern.

// Der Nutzer muss im Feld "tfMail" eine (gültige) E-Mail-Adresse eingeben.
$('[name=tfMail').setRequired(true);

Die Markierung als Mussfeld kann auch direkt im XIMA FORMCYCLE-Designer vorgenommen werden.

Derzeit wird das Attribut vr genutzt, dies wird sich allerdings ändern.

Um beispielsweise ein Eingabefeld für den Straßennamen nur dann als Mussfeld zu schalten, wenn im Feld "selAdressart" die Option "Anschrift" (und nicht "Postfach") ausgewählt ist:

// Mussfeld nur, wenn "Anschrift" und nicht "Postfach" ausgewählt ist
$('[name="tfStrasse"]').setRequiredIf("selAdressart", 1, "Anschrift");

Diese Einstellung kann auch direkt im XIMA FORMCYCLE-Designer vorgenommen werden.

Derzeit werden die HTML-Attribute vrif_c und vrif_v genutzt, dies wird sich allerdings ändern.

Die folgenden Werte sind für die Art der Überprüfung erlaubt:

• 0 (hat einen Wert) Dieses Formularfeld ist Mussfeld, wenn das andere Formularfeld nicht leer ist (hierbei wird der Wert des Parameters value nicht relevant).
• 1 (stimmt überein) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfelds mit dem gegebenen Wert übereinstimmt.
• 2 (stimmt nicht überein) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfeld nicht mit dem gegebenen Wert übereinstimmt.
• 3 (regulärer Ausdruck) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfelds auf den regulären Ausdruck passt (hierbei enthält der Parameter value den regulären Ausdruck als Zeichenkette).
• 4 (kleiner als) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfelds kleiner als der gegebene Wert ist.
• 5 (größer als) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfelds größer als der gegebene Wert ist.
• 6 (zwischen) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfelds zwischen zwei Werten liegt (hierbei hat der Parameter value das Format x-y, also z.B. 1-23).
• 7 (kleiner oder gleich) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfelds kleiner oder gleichem dem gegebenen Wert ist.
• 8 (größer oder gleich) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfelds größer oder gleichem dem gegebenen Wert ist.
• 9 (keinen Wert hat) Dieses Formularfeld ist Mussfeld, wenn das andere Formularfeld keinen Wert hat.

// Bildet die Summe aller dynamisch erstellten Kopien des Textfelds mit dem Namen "tfZahlungsbetrag".
var sum = $("[org_name='tfPayment']").sum();

Eine Fehlernachricht wird an allen Elementen angezeigt, die ungültig sind. Ungültig sind Mussfelder, die nicht ausgefüllt wurden, sowie Felder, welche falsch ausgefüllt wurden (z.B. ungültige E-Mail-Adresse).

Standardmäßig wird die Validierung nur ausgeführt, wenn der Nutzer den Wert des Formularfelds ändert und es wieder verlässt (blur bei Eingabefeldern beziehungsweise. change bei Checkboxen). Zudem wird auch beim Versuch, das Formular abzusenden, validiert.

Ein Anwendungsfall für diese Funktion beseteht darin, ein Eingabefeld jedesmal zu validieren, wenn der Nutzer ein Buchstaben eingibt oder eine Taste auf der Tastatur drückt. Dies sollte mit Bedacht eingesetzt werden, da es bei großen Formularen auf aufwendigen Validierungen zu Performanzproblemen kommen kann.

// Validiert das Eingabefeld "tfId" bei jedem Tastendruck
$("[name='tfId']").on("keydown", function(event) { $(event.target).validate(); });

// Überprüft das gesamte Formular
var isFormValid = $(".xm-form").validate();

Ist ein Formularfeld versteckt, so ist es nie ungültig und kann somit auch nie das Absenden eines Formulars verhindern.

Achtung: Diese Methode ändert nur den Sichtbarkeitszustand von genau dem Element, auf das sie gerufen wird. Soll etwa nicht nur das Eingabefeld, sondern auch das dazugehörige Label mit ausgeblendet werden, kann wie folgt vorgegangen werden:

// Macht das Eingabefeld "tfNachname" unsichtbar.
$("[name='tfNachname']").getContainer().visible(false);