Diese JQuery-Instanz zum Verketten von Befehlen.
Adds the little red star icon to the label of this form field that indicates whether the form field is a required field.
Currently, this icon is a SPAN element with the class required-star. Note that this is subject to change.
<span class="required-star">*</span>
For example:
// Adds a star to the label of the form field tf1.
$('input[name="tf1"]').addStar()
This function only changes its appearance, but does not make the form field a required field. To set whether a
form field is required, use the function setRequired.
This JQuery instance for chaining.
Initialisiert einen Datums- und Uhrzeitwähler zur Auswahl eines Termins. Termine können im Backend konfiguriert werden. Ermöglicht es dem Benutzer, ein Datum (Jahr, Monat, Tag) und eine Uhrzeit (Stunde und Minute) auszuwählen.
Optionalmethod: "init"this zum Verketten.
Ruft den aktuell ausgewählten Slot für das erste Element in der aktuellen Auswahl ab.
Die Methode, die für den Terminauswahl aufgerufen werden soll.
Der aktuell ausgewählte Slot oder undefined, wenn kein Slot ausgewählt ist.
Ruft den aktuell ausgewählten Slot für das erste Element in der aktuellen Auswahl ab, und zwar auf synchrone Weise, d. h. durch direkte Rückgabe des Slots anstelle eines Versprechens. Aus Gründen der Konsistenz geben alle Methoden Versprechen zurück. Verwenden Sie diese Methode nur, wenn Sie synchron auf den Slot zugreifen müssen, z. B. bei der Arbeit mit APIs, die keine asynchronen Rückrufe unterstützen.
Die Methode, die für die Terminauswahl aufgerufen werden soll.
Der aktuell ausgewählte Slot oder undefined, wenn kein Slot ausgewählt ist.
Ruft alle verfügbaren Slots für einen bestimmten Monat und ein bestimmtes Jahr für das erste Element in der Auswahl ab.
Die Methode, die für den Terminauswahl aufgerufen werden soll.
OptionalmonthYear: Partial<FormcycleDE.IAppointmentLocalMonthYear>Der Monat und das Jahr, für die die Slots abgerufen werden sollen. Wenn eine Eigenschaft nicht angegeben ist, wird der aktuell ausgewählte Monat und das Jahr verwendet.
Alle verfügbaren Slots für den angegebenen Monat und das angegebene Jahr. Das Versprechen wird abgelehnt, wenn die Slots nicht vom Server abgerufen werden konnten.
Ermittelt den aktuell ausgewählten Monat und das entsprechende Jahr des ersten Elements in der aktuellen Auswahl.
Die Methode, die für den Terminauswahl aufgerufen werden soll.
Der aktuell ausgewählte Monat und das Jahr oder undefined, wenn kein Monat oder Jahr ausgewählt ist.
Das Versprechen wird abgelehnt, wenn die aktuelle Auswahl leer ist.
Wählt einen bestimmten Monat in einem bestimmten Jahr aus und zeigt alle Tage für den Monat für alle Elemente in der aktuellen Auswahl an. Wenn der Datumsauswahl geschlossen werden kann, sollte sie zuerst geöffnet werden.
Die Methode, die für den Terminauswahl aufgerufen werden soll.
OptionalmonthYearDelta: Partial<FormcycleDE.IAppointmentLocalMonthYear>Der Monat und das Jahr, die relativ zum
aktuell ausgewählten Monat und Jahr ausgewählt werden sollen. Der Monat wird standardmäßig auf 1 und das Jahr auf 0 gesetzt (z. B. zum nächsten Monat wechseln). Kann negativ sein.
Alle verfügbaren Slots für den ausgewählten Monat im angegebenen Jahr. Das Array enthält einen Eintrag für jedes Element in der aktuellen Auswahl. Das Versprechen wird aufgelöst, wenn alle Monate und Jahre festgelegt wurden (oder abgelehnt, wenn einer nicht festgelegt werden konnte).
Wählt einen bestimmten Monat in einem bestimmten Jahr aus und zeigt alle Tage für den Monat für alle Elemente in der aktuellen Auswahl an. Wenn der Datumsauswahl geschlossen werden kann, sollte sie zuerst geöffnet werden.
Die Methode, die für den Terminauswahl aufgerufen werden soll.
OptionalmonthYear: Partial<FormcycleDE.IAppointmentLocalMonthYear>Tag zum Auswählen. Wenn eine Eigenschaft nicht angegeben ist, wird sie standardmäßig auf den aktuell ausgewählten Monat oder das Jahr gesetzt.
Alle verfügbaren Slots für den ausgewählten Monat im angegebenen Jahr. Das Array enthält einen Eintrag für jedes Element in der aktuellen Auswahl. Das Versprechen wird aufgelöst, wenn alle Monate und Jahre festgelegt wurden (oder abgelehnt, wenn einer nicht festgelegt werden konnte).
Wählt einen bestimmten Tag aus und zeigt die verfügbaren Slots dieses Tages für alle Elemente in der aktuellen Auswahl an.
Die Methode, die für den Terminauswahl aufgerufen werden soll.
Tag zum Auswählen. Wenn eine Eigenschaft nicht angegeben ist, wird sie standardmäßig auf das aktuell ausgewählte Datum gesetzt.
Alle verfügbaren Slots für den ausgewählten Tag. Das Array enthält einen Eintrag für jedes Element in der aktuellen Auswahl. Das Versprechen wird aufgelöst, wenn alle Daten festgelegt wurden (und abgelehnt, wenn ein Datum nicht festgelegt werden konnte).
Ändert den aktuell ausgewählten Slot in den angegebenen Slot oder löscht den ausgewählten Slot, für alle Elemente in der aktuellen Auswahl.
// Wählt den ersten Slot des aktuellen Monats aus, sofern vorhanden
async function selectFirstSlot(app) {
const {slots} = await app.appointmentPicker("getSlots");
const firstSlot = Object.values(slots)?.[0]?.slots?.[0]?.slot;
if (firstSlot) {
await app.appointmentPicker("setSlot", firstSlot);
}
}
selectFirstSlot($("[name='app1']"));
Die Methode, die für den Terminauswahl aufgerufen werden soll.
Optionalslot: IAppointmentSlotDer Slot, der festgelegt werden soll, oder undefined, um den ausgewählten Slot zu löschen.
Optionaloptions: IAppointmentSetSlotOptionsOptionale Einstellungen, die beeinflussen, wie der Slot festgelegt wird.
Ein Versprechen, das aufgelöst wird, wenn die Slots festgelegt wurden, oder abgelehnt wird, wenn die Slots nicht festgelegt werden konnten.
Schließt oder öffnet den Terminauswahl für alle Elemente in der aktuellen Auswahl.
Die Methode, die für den Terminauswahl aufgerufen werden soll.
Optionalopen: booleantrue, um den Terminauswahl zu öffnen, false, um ihn zu schließen, undefined,
um ihn zu öffnen, wenn er geschlossen ist, und umgekehrt.
Ob der Terminauswahl jetzt geöffnet ist. Das Array enthält einen Eintrag für jedes Element in der aktuellen Auswahl. Das Versprechen wird aufgelöst, wenn der Terminauswahl umgeschaltet wurde, und abgelehnt, wenn die Auswahl leer ist oder der Terminauswahl nicht schließbar ist.
Überprüft, ob der Terminauswahl für das erste Element in der aktuellen Auswahl geöffnet oder geschlossen ist.
Die Methode, die für den Terminauswahl aufgerufen werden soll.
true, wenn der Terminauswahl geöffnet ist, oder false sonst. Gibt immer true zurück, wenn der Terminauswahl nicht schließbar ist.
Das Versprechen wird abgelehnt, wenn die Auswahl leer ist.
Initializes a date and time picker for selecting an appointment. Appointments can be configured in the backend. Lets the user select a date (year, month, day) and a time (hour and minute).
Optionalmethod: "init"this for chaining.
Retrieves the currently selected slot for the first element in the current selection.
The method to invoke on the appointment picker.
The currently selected slot, or undefined when no slot is selected. The promise is rejected when the current selection is empty.
Retrieves the currently selected slot for the first element in the current selection, in a synchronous fashion, i.e. by returning the slot directly instead of a promise. For consistency, all methods returns promises, use this method only when you need to access the slot synchronously, such as when working with APIs that do not support asynchronous callbacks.
The method to invoke on the appointment picker.
The currently selected slot, or undefined when no slot is selected.
Fetches all available slots of a given month and year for the first element in the selection.
The method to invoke on the appointment picker.
OptionalmonthYear: Partial<IAppointmentLocalMonthYear>The month and year for which to fetch the slots. When a property is not given, it defaults to the currently selected month and year.
All available slots for the given month and year. The promise is rejected when the slots could not be fetched from the server.
Finds the currently selected month and the corresponding year of the first element in the current selection.
The method to invoke on the appointment picker.
The currently selected month and year, or undefined when no
month or year is selected. The promise is rejected when the current
selection is empty
Selects a particular month in a given year and shows all days for the month for all elements in the current selection. When the date picker is closeable, you should open it first.
The method to invoke on the appointment picker.
OptionalmonthYearDelta: Partial<IAppointmentLocalMonthYear>The month and year to select, relative to the
currently selected month and year. The month defaults to 1 and the year
to 0 (e.g. move to the next month). Can be negative.
All available slots for the selected month in the given year. The array contains one entry for each element in the current selection. The promise resolves when all month and years were set (or rejects when one could not be set).
Selects a particular month in a given year and shows all days for the month for all elements in the current selection. When the date picker is closeable, you should open it first.
The method to invoke on the appointment picker.
OptionalmonthYear: Partial<IAppointmentLocalMonthYear>Day to select. When a property is not given, it defaults to the currently selected month or year.
All available slots for the selected month in the given year. The array contains one entry for each element in the current selection. The promise resolves when all month and years were set (or rejects when one could not be set).
Selects a particular day and shows the available slots of that day for all elements in the current selection.
The method to invoke on the appointment picker.
Day to select. When a property is not given, it defaults to the currently selected date.
All available slots for the selected day. The array contains one entry for each element in the current selection. The promise resolves when all dates were set (and rejects when a date could not be set).
Changes the currently selected slot to the given slot or clears the selected slot, for all elements in the current selection.
// Selects the first slot of the current month, if any
async function selectFirstSlot(app) {
const {slots} = await app.appointmentPicker("getSlots");
const firstSlot = Object.values(slots)?.[0]?.slots?.[0]?.slot;
if (firstSlot) {
await app.appointmentPicker("setSlot", firstSlot);
}
}
selectFirstSlot($("[name='app1']"));
The method to invoke on the appointment picker.
Optionalslot: IAppointmentSlotThe slot to set, or undefined to clear the selected slot.
Optionaloptions: IAppointmentSetSlotOptionsOptional settings affecting how the slot is set.
A promise that resolves when the slots were set, or rejects when the slots could not be set.
Closes or opens the appointment picker for all elements in the current selection.
The method to invoke on the appointment picker.
Optionalopen: booleantrue to open the picker, false to close it, undefined
to open it when closed and vice versa.
Whether the picker is now opened. The array contains one entry for each element in the current selection. The promise is resolved when the picker was toggled, and rejected when either the selection is empty or the appointment picker is not closable.
Checks whether the appointment picker is opened or closed, for the first element in the current selection.
The method to invoke on the appointment picker.
true when the picker is open, or false otherwise. Always
returns true when the picker is not closable. The promise is rejected
when either the selection is empty.
Sollte nur auf Texteingabefelder angewendet werden.
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=tfLändercode]').val(ui.item.code)
}
$('[name=tfLander]').autocompleteDB("LandNamen", "de", codeSetzen);
Wie im oberen Beispiel wird die Autovervollständigung initialisiert. 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 tfLändercode für die weitere Verarbeitung geschrieben.
Name der Datenbankabfrage. Datenbankabfragen können im Backend von XIMA formcycle angelegt werden.
Optionallabel: stringName der Datenbankspalte. Rückfallwert is label. Diese wird sowohl zum Anzeigen genutzt als auch
als der Wert, der beim Absenden des Formulars übertragen wird.
OptionalonSelect: (Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.
Diese JQuery-Instanz zum Verketten von Befehlen.
Sollte nur auf Texteingabefelder angewendet werden.
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=tfLändercode]').val(ui.item.code)
}
$('[name=tfLander]').autocompleteDB("LandNamen", "de", codeSetzen);
Wie im oberen Beispiel wird die Autovervollständigung initialisiert. 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 tfLändercode für die weitere Verarbeitung geschrieben.
Name der Datenbankabfrage. Datenbankabfragen können im Backend von XIMA formcycle angelegt werden.
Name der Datenbankspalte, die als Text genutzt wird, der dem Nutzer angezeigt wird.
Name der Datenbankspalte, die als Wert genutzt wird, der beim Absenden des Formulars übertragen wird.
OptionalonSelect: (Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.
Optionalparams: anyWeitere Parameter für die Datenbankabfrage. Kann ein einzelner Wert oder ein
Feld von Werten sein, es werden alle angegebenen Wert als Parameter übertragen. Bei undefined wird
ein leerer Wert übertragen. Bei einem String wird der String selbst übertragen. Bei Zahlen und
Wahrheitswerden wird die String-Repräsentation der Zahl beziehungsweise des Wahrheitswerts übertragen.
Bei einer JQuery-Instanz werden die Werte aller HTML-Elemente in der JQuery-Selektion übertragen. Bei einem
HTMLElement: (1) wenn es ein Checkbox- oder Radio-Input-Element ist, wird der Wert der Checkbox oder des Radiobuttons
übertragen, falls selektiert, (2) wenn es ein File-Input-Element ist, werden die Namen aller Dateien übertragen oder
der leere String, falls keine Datei ausgewählt ist, (3) bei anderen Input-Elementen wird der Wert des Input-Elements übertragen,
(4) wenn es ein Select- oder Textarea-Element ist, wird der Wert via $.fn.val ermittelt und übertragen, (5) bei anderen
Elementen wird nach Kinderelementen vom Type input, textarea und select gesucht und deren Werte übertragen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Should be used only on text input fields.
Sets up autocompletion for this text input field, with the available options taken from a database query. The user is then shown a list of possible options as they type.
The database query is run by making an AJAX request. Database queries are configured within the XIMA formcycle backend.
The specified column name is used as the label for the option that is displayed to the user; and also as the value that is transmitted when the user submits the form. This function restricts the query to the specified column. This reduces the amount of data that needs to be transmitted and speeds up loading when dealing with large database tables.
The database query must contain exactly one free parameter specified by a question mark ?. This parameter is
replaced with the text the user types in the input field. Please note that you do not need to use quotation marks
or escape sequences, as the database query uses prepared statements.
Example with countries
Assume a database query was created in the backend named CountryByName. The query might look like this:
SELECT code, en FROM demo.countries where en like concat('%',?,'%');
You can use this query with a text input field named tfCountry:
$('[name="tfCountry"]').autocompleteDB("CountryByName", "en");
Now, for example, when the user enters the text An, the database query returns all countries with a name that
starts with An. The user is presented with the matching options and can choose one of Andorra, Angola,
Anguilla, Antarctica, or Antigua and Barbuda.
Example with callback
function setCode(event, ui){
$('[name=tfCountryCode]').val(ui.item.code)
}
$('[name=tfCountries]').autocompleteDB("CountryByName", "en", setCode);
As in the previous example, autocomplete gets initialised with a list of countries. In addition, a function is
called each time when the user selects a country. This function accesses the selected element (ui.item) and
reads the value of the column code (ui.item.code). This value corresponds to the code column of the
database query. Finally, this country code is written to the input field named tfCountry and is now available
for further processing.
Name of the database query. Database queries can be created in the backend of XIMA formcycle.
Optionallabel: stringName of a database column. This is used as the label displayed to the user. This is used as both the displayed label and the value that is transmitted when the form is submitted.
OptionalonSelect: (The callback function that is called when the user selects an option. For further details, see the help pages of jQueryUI on autocomplete.
This JQuery instance for chaining.
Should be used only on text input fields.
Sets up autocompletion for this text input field, with the available options taken from a database query. The user is then shown a list of possible options as they type.
The database query is run by making an AJAX request. Database queries are configured within the XIMA formcycle backend.
You can specify two column names. One column is used as the label for the option that is displayed to the user. The other column is used as the value that is transmitted when the user submits the form. This function restricts the query to the two specified column. This reduces the amount of data that needs to be transmitted and speeds up loading when dealing with large database tables.
The database query must contain exactly at least one free parameter specified by a question mark ?. This
parameter is replaced with the text the user types in the input field. Please note that you do not need to use
quotation marks or escape sequences, as the database query uses prepared statements. If the query contains more
parameters, the remaining parameters must be given or the query fails.
Example with countries
Assume a database query was created in the backend named CountryByName. The query might look like this:
SELECT code, en FROM demo.countries where en like concat('%',?,'%');
You can use this query with a text input field named tfCountry:
$('[name="tfCountry"]').autocompleteDB("CountryByName", "en");
Now, for example, when the user enters the text An, the database query returns all countries with a name that
starts with An. The user is presented with the matching options and can choose one of Andorra, Angola,
Anguilla, Antarctica, or Antigua and Barbuda.
Example with callback
function setCode(event, ui){
$('[name=tfCountryCode]').val(ui.item.code)
}
$('[name=tfCountries]').autocompleteDB("CountryByName", "en", setCode);
As in the previous example, autocomplete gets initialised with a list of countries. In addition, a function is
called each time when the user selects a country. This function accesses the selected element (ui.item) and
reads the value of the column code (ui.item.code). This value corresponds to the code column of the
database query. Finally, this country code is written to the input field named tfCountry and is now available
for further processing.
Name of the database query. Database queries can be created in the backend of XIMA formcycle.
Name of a database column. This is used as the label displayed to the user.
Name of a database column. This is used as the value that is transmitted.
OptionalonSelect: (The callback function that is called when the user selects an option. For further details, see the help pages of jQueryUI on autocomplete.
Optionalparams: anyAdditional parameters for the database query. Can be a single value or an array of values, all given
values are transmitted as additional parameters. For undefined an empty value is transmitted. For a string, the
string value itself is transmitted. For a number or boolean, the string representation of the number or boolean
is transmitted. For a JQuery instance, the values of all elements in that JQuery selection are transmitted. For
an HTML element: (1) if it is an input checkbox or radio element, transmits the value if the checkbox or radio
button is checked, (2) if it is an input file element, transmits the name of each file, or an empty string if no
files are selected, (3) if it is an input element of another type, transmits the value of the input element, (4) if it
is a textarea or select element, obtains the value via $.fn.val and transmits that value, (5) if it is any other
element, searches for child elements that are input, textarea, or select elements and transmits those values.
This JQuery instance for chaining.
Sollte nur auf Texteingabefelder angewendet werden.
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.
Name der LDAP-Abfrage. LDAP-Abfragen können im Backend von XIMA formcycle angelegt werden.
Optionallabel: stringName eines LDAP-Attributs. Rückfallwert is label. Dieses wird sowohl zum Anzeigen genutzt als auch
als der Wert, der beim Absenden des Formulars übertragen wird. Um eine verschachtelte Eigenschaft anzugeben,
werden die Bestandteile mit einem Punkt getrennt, z.B.: name.full oder location.city.
OptionalonSelect: (Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.
Diese JQuery-Instanz zum Verketten von Befehlen.
Sollte nur auf Texteingabefelder angewendet werden.
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.
Name der LDAP-Abfrage. LDAP-Abfragen können im Backend von XIMA formcycle angelegt werden.
Name eines LDAP-Attributs, dessen Wert dem Nutzer angezeigt wird. Um eine verschachtelte Eigenschaft
anzugeben, werden die Bestandteile mit einem Punkt getrennt, z.B.: name.full oder location.city.
Name eines LDAP-Attributs, dessen Wert beim Absenden des Formulars übertragen wird. Um eine
verschachtelte Eigenschaft anzugeben, werden die Bestandteile mit einem Punkt getrennt, z.B.: name.full oder
location.city.
OptionalonSelect: (Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.
Optionalparams: anyWeitere Parameter für die LDAP-Abfrage. Kann ein einzelner Wert oder ein
Feld von Werten sein, es werden alle angegebenen Wert als Parameter übertragen. Bei undefined wird
ein leerer Wert übertragen. Bei einem String wird der String selbst übertragen. Bei Zahlen und
Wahrheitswerden wird die String-Repräsentation der Zahl beziehungsweise des Wahrheitswerts übertragen.
Bei einer JQuery-Instanz werden die Werte aller HTML-Elemente in der JQuery-Selektion übertragen. Bei einem
HTMLElement: (1) wenn es ein Checkbox- oder Radio-Input-Element ist, wird der Wert der Checkbox oder des Radiobuttons
übertragen, falls selektiert, (2) wenn es ein File-Input-Element ist, werden die Namen aller Dateien übertragen oder
der leere String, falls keine Datei ausgewählt ist, (3) bei anderen Input-Elementen wird der Wert des Input-Elements übertragen,
(4) wenn es ein Select- oder Textarea-Element ist, wird der Wert via $.fn.val ermittelt und übertragen, (5) bei anderen
Elementen wird nach Kinderelementen vom Type input, textarea und select gesucht und deren Werte übertragen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Should be used only on text input fields.
Sets up autocompletion for this text input field, with the available options taken from an LDAP
(Lightweight Directory Access Protocol) query. The user is then shown a list of possible options as they type.
The LDAP query is run by making an AJAX request. Database queries are configured within the XIMA formcycle backend.
The specified LDAP property is used as the label for the option that is displayed to the user; and also as the value that is transmitted when the user submits the form. This function restricts the query to the specified properties. This reduces the amount of data that needs to be transmitted and speeds up loading.
The LDAP query must contain exactly one free parameter specified by a question mark ?. This parameter is
replaced with the text the user types in the input field.
Example
Assume an LDAP query was created in the backend named Employees. The query might look like this:
BaseDN: ou="employees", ou="company", dc="company", dc="com"
Query : (userPrincipalName=*?*)
Then, to use this query with a text input field named tfEmployees:
$('[name="tfEmployees"]').autocompleteLDAP("Employees", "name.full");
Now when the user enters the text John, the LDAP query returns all employees whose name contains John; and
the user is presented with these options: John Smith, John Davis, John Brown.
Name of the LDAP query. LDAP queries can be created in the backend of XIMA formcycle.
Optionallabel: stringName of an LDAP property. Defaults to label. This is used as both the label displayed to the user
and the value that is transmitted when the form is submitted. To specify a nested property, separate the keys
with a period, e.g. name.full or location.city.
OptionalonSelect: (The callback function that is called when the user selects an option. For further details, see the help pages of jQueryUI on autocomplete.
This JQuery instance for chaining.
Should be used only on text input fields.
Sets up autocompletion for this text input field, with the available options taken from an LDAP
(Lightweight Directory Access Protocol) query. The user is then shown a list of possible options as they type.
The LDAP query is run by making an AJAX request. Database queries are configured within the XIMA formcycle backend.
You can specify two LDAP properties. One property is used as the label for the option that is displayed to the user. The other property is used as the value that is transmitted when the user submits the form. This function restricts the query to the two specified properties. This reduces the amount of data that needs to be transmitted and speeds up loading.
The LDAP query must contain exactly at least one free parameter specified by a question mark ?. This
parameter is replaced with the text the user types in the input field. If the query contains more parameters, the
remaining parameters must be given or the query fails.
Example
Assume an LDAP query was created in the backend named Employees. The query might look like this:
BaseDN: ou="employees", ou="company", dc="company", dc="com"
Query : (userPrincipalName=*?*)
Then, to use this query with a text input field named tfEmployees:
$('[name="tfEmployees"]').autocompleteLDAP("Employees", "name.full", "accountName");
Now when the user enters the text John, the LDAP query returns all employees whose name contains John; and
the user is presented with these options: John Smith, John Davis, John Brown. The user is shown the full
name of the employee, their account name is used when the form is submitted.
Name of the LDAP query. LDAP queries can be created in the backend of XIMA formcycle.
Name of an LDAP property. This is used as the label displayed to the user. To
specify a nested property, separate the keys with a period, e.g. name.full or location.city.
Name of an LDAP property. This is used as the value that is transmitted. To specify a nested
property, separate the keys with a period, e.g. name.full or location.city.
OptionalonSelect: (The callback function that is called when the user selects an option. For further details, see the help pages of jQueryUI on autocomplete.
Optionalparams: anyAdditional parameters for the LDAP query. Can be a single value or an array of values, all given
values are transmitted as additional parameters. For undefined an empty value is transmitted. For a string, the
string value itself is transmitted. For a number or boolean, the string representation of the number or boolean
is transmitted. For a JQuery instance, the values of all elements in that JQuery selection are transmitted. For
an HTML element: (1) if it is an input checkbox or radio element, transmits the value if the checkbox or radio
button is checked, (2) if it is an input file element, transmits the name of each file, or an empty string if no
files are selected, (3) if it is an input element of another type, transmits the value of the input element, (4) if it
is a textarea or select element, obtains the value via $.fn.val and transmits that value, (5) if it is any other
element, searches for child elements that are input, textarea, or select elements and transmits those values.
This JQuery instance for chaining.
Sollte nur auf Texteingabefelder angewendet werden.
Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus dem Resultat einer HTTP-Abfrage genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.
Dieser Methode erlaubt es, eine eigene URL anzugeben. Zum Ausführen von Datenbank- und LDAP-Abfragen, die im Backend von XIMA formcycle erstellt wurden, sollte JQuery.autocompleteDB beziehungsweise JQuery.autocompleteLDAP verwendet werden.
URL, die für die Abfrage verwendet werden soll. Normalerweise sollten hierfür die URLs aus
XFC_METADATA.urls verwendet werden, beispielsweise XFC_METADATA.urls.dataquery_ldap oder
XFC_METADATA.urls.dataquery_db.
Name der Abfrage. LDAP und Datenbankabfrage können im Backend von XIMA formcycle erstellt werden.
Name eines Felds für das Label und den Wert, wie etwa eine Datenbankspalte oder ein LDAP-Attribut.
Rückfallwert is label. Dieses wird sowohl zum Anzeigen genutzt als als der Wert, der beim Absenden des Formulars
übertragen wird.
OptionalonSelect: (Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.
Sollte nur auf Texteingabefelder angewendet werden.
Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus dem Resultat einer HTTP-Abfrage genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.
Dieser Methode erlaubt es, eine eigene URL anzugeben. Zum Ausführen von Datenbank- und LDAP-Abfragen, die im Backend von XIMA formcycle erstellt wurden, sollte JQuery.autocompleteDB beziehungsweise JQuery.autocompleteLDAP verwendet werden.
URL, die für die Abfrage verwendet werden soll. Normalerweise sollten hierfür die URLs aus
XFC_METADATA.urls verwendet werden, beispielsweise XFC_METADATA.urls.dataquery_ldap oder
XFC_METADATA.urls.dataquery_db.
Name der Abfrage. LDAP und Datenbankabfrage können im Backend von XIMA formcycle erstellt werden.
Name des Felds für den Anzeigetext, wie etwa eine Datenbankspalte oder ein LDAP-Attribut. Dieser Wert wird dem Nutzer als Auswahloption angezeigt.
Name des Felds für den Wert, wie etwa eine Datenbankspalte oder ein LDAP-Attribut. Der Wert wird beim Absenden des Formulars übertragen.
OptionalonSelect: (Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.
Optionalparams: anyWeitere Parameter für die Abfrage. Kann ein einzelner Wert oder ein
Feld von Werten sein, es werden alle angegebenen Wert als Parameter übertragen. Bei undefined wird
ein leerer Wert übertragen. Bei einem String wird der String selbst übertragen. Bei Zahlen und
Wahrheitswerden wird die String-Repräsentation der Zahl beziehungsweise des Wahrheitswerts übertragen.
Bei einer JQuery-Instanz werden die Werte aller HTML-Elemente in der JQuery-Selektion übertragen. Bei einem
HTMLElement: (1) wenn es ein Checkbox- oder Radio-Input-Element ist, wird der Wert der Checkbox oder des Radiobuttons
übertragen, falls selektiert, (2) wenn es ein File-Input-Element ist, werden die Namen aller Dateien übertragen oder
der leere String, falls keine Datei ausgewählt ist, (3) bei anderen Input-Elementen wird der Wert des Input-Elements übertragen,
(4) wenn es ein Select- oder Textarea-Element ist, wird der Wert via $.fn.val ermittelt und übertragen, (5) bei anderen
Elementen wird nach Kinderelementen vom Type input, textarea und select gesucht und deren Werte übertragen.
Should be used only on text input fields.
Sets up autocompletion for this text input field, with the available options taken from the result of an HTTP query. The user is then shown a list of possible options as they type.
This method lets you specify a custom URL. Use JQuery.autocompleteDB or JQuery.autocompleteLDAP if you want to query database or LDAP queries defined in the XIMA formcycle backend.
The URL of the query to execute. Normally you should use the URLs from XFC_METADATA.urls, e.g.
XFC_METADATA.urls.dataquery_ldap or XFC_METADATA.urls.dataquery_db.
Name of the query. LDAP and database queries can be created in the XIMA formcycle backend.
Name of the field for the label and the value, such as a database column or an LDAP property.
Defaults to label. This is used as both the label displayed to the user and the value that is transmitted when
the form is submitted.
OptionalonSelect: (The callback function that is called when the user selects an option. For further details, see the help pages of jQueryUI on autocomplete.
Should be used only on text input fields.
Sets up autocompletion for this text input field, with the available options taken from the result of an HTTP query. The user is then shown a list of possible options as they type.
This method lets you specify a custom URL. Use JQuery.autocompleteDB or JQuery.autocompleteLDAP if you want to query database or LDAP queries defined in the XIMA formcycle backend.
The URL of the query to execute. Normally you should use the URLs from XFC_METADATA.urls, e.g.
XFC_METADATA.urls.dataquery_ldap or XFC_METADATA.urls.dataquery_db.
Name of the query. LDAP and database queries can be created in the XIMA formcycle backend.
Name of the field to use as the label, e.g. the name of a database column or an LDAP property. This is used as the label displayed to the user.
Name of the field to use as the value, e.g. the name of a database column or an LDAP property.
OptionalonSelect: (The callback function that is called when the user selects an option. For further details, see the help pages of jQueryUI on autocomplete.
Optionalparams: anyAdditional parameters for the query. Can be a single value or an array of values, all given
values are transmitted as additional parameters. For undefined an empty value is transmitted. For a string, the
string value itself is transmitted. For a number or boolean, the string representation of the number or boolean
is transmitted. For a JQuery instance, the values of all elements in that JQuery selection are transmitted. For
an HTML element: (1) if it is an input checkbox or radio element, transmits the value if the checkbox or radio
button is checked, (2) if it is an input file element, transmits the name of each file, or an empty string if no
files are selected, (3) if it is an input element of another type, transmits the value of the input element, (4) if it
is a textarea or select element, obtains the value via $.fn.val and transmits that value, (5) if it is any other
element, searches for child elements that are input, textarea, or select elements and transmits those values.
Initialisiert autoNumeric. Muss aufgerufen werden, bevor die anderen Methoden genutzt werden können. Diese Funktion sollte mit Texteingabefeldern genutzt 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:
EUR oder ¥.s) oder am Anfang (Wert p) stehtEs 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"
>
Optionaloptions: Partial<ValueOrSupplier<InitOptions>>Optionale Einstellungen zur Konfiguration von autoNumeric.
Diese JQuery-Instanz zum Verketten von Befehlen.
Beendet die Formatierung durch autoNumeric.
Name der aufzurufenden Methode.
Diese JQuery-Instanz zum Verketten von Befehlen.
Methode, um den eigentlichen Zahlenwert eines Eingabefeldes zu erhalten, unabhängig der derzeitigen Formattierungseinstellungen.
Name der aufzurufenden Methode.
Der aktuelle Wert, im Format nnnn.nn mit einem Punkt als Dezimaltrennzeichen.
Nutzt die Methode serializeArray von jQuery, welche ein Feld mit Objekten zurückliefert und als JSON-String
enkodiert werden kann.
Name der aufzurufenden Methode.
Die Werte, im Format nnnn.nn mit einem Punkt als Dezimaltrennzeichen.
Name der aufzurufenden Methode.
Die aktuellen Einstellungen von autoNumeric. Kann für die Entwicklung nützlich sein.
Nutzt die Methode serialize von jQuery, welche aus einer Menge von Formularelementen eine URL-enkodierte
Zeichenkette erzeugt, die abgesendet werden kann. Diese Methode sorgt dafür, dass nicht die formattieren Werte
genutzt werden, sondern die formatunabhängigen.
Name der aufzurufenden Methode.
Die Werte, im Format nnnn.nn mit einem Punkt als Dezimaltrennzeichen.
Initialisiert autoNumeric. Muss aufgerufen werden, bevor die anderen Methoden genutzt werden können.
Name der aufzurufenden Methode.
Optionaloptions: Partial<ValueOrSupplier<InitOptions>>Optionale Einstellungen für autoNumeric.
Diese JQuery-Instanz zum Verketten von Befehlen.
Setzt den Wert des Eingabefelds auf den gegebenen Wert. Der Wert wird anhand der aktuellen Formattierungseinstellungen entsprechend formattiert angezeigt.
Name der aufzurufenden Methode.
Die neue Zahl oder der neue Wert für das Eingabefeld.
Diese JQuery-Instanz zum Verketten von Befehlen.
Aktualisiert eine oder mehrere Formatierungseinstellungen.
Name der aufzurufenden Methode.
Neue zu setzende Formatierungseinstellungen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Initializes autoNumeric. Must be run before other methods can be called. This method should only be used with text input fields.
autoNumeric is a JavaScript library for entering and formatting numbers in a language and country dependent way. This library is already included in all forms and may be used directly in the JavaScript tab of the designer. See the official web presence for more information.
First you need to select an input field with jQuery. Then you can pass the desired options to autoNumeric as follows:
$("[name=tfWeight]").autoNumeric("init", {
aDec: '.', // Use a period as a decimal separator
aSep: '', // No separator for thousands
aSign: ' kg', // Unit kg
pSign: 's', // Place the unit after the number
vMin: 1, // Must enter at least a value of 1
vMax: 100, // Must enter a value less than 100
mDec: 3, // At most 3 digits after the period
aPad: false, // May be less than 3 decimal digits
// more options...
});
Now the user can enter a number like 3,99 in the text field tfWeight. This is then displayed as 3,99 kg.
autoNumeric ensures that only valid number can be entered.
Some common options include:
12,658) EUR or ¥.s) or at the end (value p)true, always pad the decimal digits with 0s (such as 2,3400)Please note that instead of specifying the options via JavaScript, you can also add HTML data attributes to the input field:
<input id="money-field"
data-a-dec=","
data-a-sign="kg"
data-v-min="1"
data-v-max="100"
data-m-dec="3"
>
Optionaloptions: Partial<ValueOrSupplier<InitOptions>>Optional settings for autoNumeric.
This JQuery instance for chaining.
Stops autoNumeric.
The name of the method to invoke.
This JQuery instance for chaining.
This basically uses jQuery's serializeArray method which returns a JavaScript array of objects, ready to be encoded as a JSON string. @param method The name of the method to invoke. @return The values, always formatted as 'nnnn.nn' with the period as the decimal point. @deprecated Use $.xutil.numberFormat`.
The name of the method to invoke.
The autoNumeric settings for this field. You may find this helpful when developing a page.
This basically uses jQuery's .serialize() method which creates a text string (URL-encoded notation) from a set of form elements that is ready for submission. The extra step taken here is the string is split and iterated through and the formatted values are replaced with unformatted values. The string is then joined back together and returned.
The name of the method to invoke.
The values, always formatted as 'nnnn.nn' with the period as the decimal point.
Initializes autoNumeric Must be run before other methods can be called.
The name of the method to invoke.
Optionaloptions: Partial<ValueOrSupplier<InitOptions>>Optional settings for autoNumeric.
This JQuery instance for chaining.
Sets the given number on this field, and formats it according to the current options.
The name of the method to invoke.
The new number to be set on this field.
This JQuery instance for chaining.
Updates the current AutoNumeric settings.
The name of the method to invoke.
New options that are to be set.
This JQuery instance for chaining.
Löscht den Wert dieses Formularfeldes. Bei Texteingabefeldern wird der Text geleert, bei Auswahlfeldern alle ausgewählten Optionen deselektiert.
Das Formularfeld wird nach dem Leeren nicht validiert. Falls es sich um ein Mussfeld handelt, wird daher keine
Fehlermeldung angezeigt. 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 eingegebenen Text
$('[name="tf1"]').clear();
// Validiert das Textfeld. Falls es ein Mussfeld ist, wird nun eine Fehlernachricht angezeigt.
$('[name="tf1"]').validate();
Diese JQuery-Instanz zum Verketten von Befehlen.
Clears the value of this form field. For text input fields, the entered text is removed. For select fields, all selected options are deselected.
The form field will not be validated when cleared. In case the form field is required,
no errors will be shown. Validation can be triggered immediately with the function validate().
// Changes the text of the input field to 'Hello world!'
// This is what the user usually does.
$('[data-name="tf1"]').val("Hello world!");
// Clears the text.
$('[data-name="tf1"]').clear();
// Validates the input field. If the field is required, an error message is now shown.
$('[data-name="tf1"]').validate() ;
This JQuery instance for chaining.
Diese Funktion kann verwendet werden mit Auswahlfeldern, die als Combobox dargestellt werden.
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();
Optionaloptions: Partial<FormcycleDE.Cob2AutoOptions>Optional Einstellungen für die Autovervollständigung.
Diese JQuery-Instanz zum Verketten von Befehlen.
This function can be used with select elements displayed as a combobox. It converts the select element to a text
input field and displays a list of possible options as the user types. Currently, this uses the jQueryUI
widget autocomplete.
You can also activate this option directly in the designer. To do so, select a select element and click on the checkbox in the base settings section of the property panel.
// Turns the form field with name "sel1" into an autocomplete field.
$("[data-name='sel1']").cob2auto();
Optionaloptions: Partial<Cob2AutoOptions>Optional settings for the autocomplete.
This JQuery instance for chaining.
Initialisiert das jQuery Counter-Plugin auf einem Element.
Dieses jQuery-Plugin zum Zählen von Wörtern und Zeichen ermöglicht es Ihnen, Zeichen oder Wörter auf- oder abwärts zu zählen. Sie können ein Mindest- oder Höchstziel für den Zähler festlegen.
Optionalsettings: Partial<JQueryCounter.Settings>Optionale Einstellungen für das Plugin.
Diese JQuery-Instanz zum Verketten von Befehlen.
Initializes the jQuery counter plugin on an element.
This jQuery Word and character counter plug-in allows you to count characters or words, up or down. You can set a minimum or maximum goal for the counter to reach.
Optionalsettings: Partial<JQueryCounter.Settings>Optional settings for the plugin.
This JQuery instance for chaining.
Schaltet ein Formularelement wiederholbar, sodass der Nutzer nun eine beliebige Anzahl an Kopien anlegen kann. Etwa kann ein E-Mail-Feld wiederholbar geschaltet werden, sodass der Nutzer eine oder mehrere E-Mail-Adressen eingeben kann.
Um wiederholte erzeugte Elemente zu selektieren, sollte das Attribut data-org-name statt name verwendet werden.
// Schaltet Formularfeld "tfMail" wiederholbar
$("[name='tfMail']").dynamic();
// Zugriff auf den Wert des ersten wiederholten Elements.
$("[data-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ückruffunktion, 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 Grundeigenschaften 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.
Optionaloptions: Partial<FormcycleDE.DynamicOptions>Optionen für das wiederholbare Formularfeld, z.B. um zu steuern, wie viele wiederholte erzeugte Elemente erlaubt sind oder um Rückruffunktionen zu definieren.
Diese JQuery-Instanz zum Verketten von Befehlen.
Für ein wiederholbares Element: Erhöht die Anzahl wiederholter Element um eins, erzeugt ein neues Formularelement. Dieses wird am Ende der bereits existierenden wiederholten Elemente hinzugefügt. Das Aufrufen dieser Methode hat die gleiche Auswirkung wie das Betätigen des Plus-Knopfs.
// Formularelement "tfMail" wiederholbar schalten
$("[data-name='tfMail']").dynamic();
// ...
// Ein weiteres E-Mail-Eingabefeld erzeugen
$("[data-name='tfMail']").dynamic("addRow");
Diese JQuery-Instanz zum Verketten von Befehlen.
Für ein wiederholbares Element: Entfernt ein wiederholtes Element. Gleiches Resultat wie das Betätigen des Minus-Knopfs am jeweiligen wiederholten Element.
// Formularelement "tfMail" dynamisch schalten
$("[data-name='tfMail']").dynamic();
// ...
// Das letzte E-Mail-Eingabefeld entfernen
$("[data-name='tfMail']").dynamic("removeRow");
Name der aufzurufenden Methode.
OptionalrowIndex: number0-basierter Index des zu löschenden Elements. Wenn nicht übergeben, wird das letzte Element gelöscht.
Diese JQuery-Instanz zum Verketten von Befehlen.
Für ein wiederholbares Element: Ermittelt, wie viele wiederholte Elemente es aktuell gibt.
// Formularelement "tfMail" wiederholbar schalten
$("[data-name='tfMail']").dynamic({minSize: 3});
// Anzahl der Wiederholung ist initial 3
var repetitions = $("[data-name='tfMail']").dynamic("getRowSize");
Die aktuelle Anzahl an wiederholten erzeugten Elementen.
Für ein wiederholbares Element: Erzeugt Formularelemente oder entfernt welche, sodass nun die übergebene Anzahl an wiederholten Formularelementen existiert.
// Schalte Formularfeld "tfMail" wiederholbar
$("[data-name='tfMail']").dynamic();
// Setze die Anzahl an wiederholten Formularelementen auf 5.
$("[data-name='tfMail']").dynamic("setRowSize", 5);
Name der aufzurufenden Methode.
Die neu zu setzende Anzahl an wiederholten Formularfeldern.
Diese JQuery-Instanz zum Verketten von Befehlen.
Makes a form element or container repeatable, so that the user can create multiple copies of it. This could be used, for example, on an email input field to let the user enter one or many email addresses.
To select repeated elements that were created dynamically, use the attribute data-org-name instead of name, e.g:
// Makes form field named tf1 repeatable.
$("[data-name='tf1']").dynamic();
// Access the value of the first repeated form field.
$("[data-org-name='tf1']").first().val();
Each repeatable element that is created gets wrapped inside a DIV container with the class dynamic-row. It is
this container that will be passed to the callback functions afterAdd, afterDel, beforeAdd, beforeDel,
and changeRowSize. In case you need to initialize a form field with JavaScript, such as with the function
cob2auto or errorFunc, initialization must be done after the element was created:
// Make the select field "selPeople" repeatable
$("[data-name='selPeople']").dynamic({
// Callback whenever a new select field is created
afterAdd: function(_, item) {
// Select the actual form field inside the DIV container.
var element = item.find('.XItem');
// Now the select field can be initialized, eg:
element.cob2auto();
}
});
You can also make elements repeatable directly in base settings section of the property panel of the designer. This also lets you set the minimum and maximum number of repeated items, as well as a trigger element. For more advanced use cases, initialize repeatable elements with this JavaScript method.
Optionaloptions: Partial<DynamicOptions>Options to customize how many items are allowed, how to determine the number of repeated items, etc.
The JQuery instance for chaining.
For a repeatable element: Increases the number of repeated elements by one. That is, create a new form element and add it to the end of the existing repeated form elements. Same effect as clicking on the add (plus icon) button.
// Make input field "tfMail" repeatable
$("[data-name='tfMail']").dynamic();
// ...
// Create a new email input field
$("[data-name='tfMail']").dynamic("addRow");
The name of the method to invoke.
This JQuery instance for chaining.
For a repeatable element: Removes a repeated form field. Same effect as clicking on the delete (minus icon) button next to the repeated element.
// Make input field "tfMail" repeatable
$("[data-name='tfMail']").dynamic();
// ...
// Remove the last email input field
$("[data-name='tfMail']").dynamic("removeRow", 0);
The name of the method to invoke.
OptionalrowIndex: numberIndex of the row to delete, starting at 0. If not given, deletes the last row.
This JQuery instance for chaining.
For a repeatable element: Determines the current number of repeated elements.
// Make input field "tfMail" repeatable
$("[data-name='tfMail']").dynamic({minSize: 3});
// Number of repetitions is initially 3
var repetitions = $("[data-name='tfMail']").dynamic("getRowSize");
The name of the method to invoke.
The current count of repeated elements.
For a repeatable element: sets the number of repeated elements by adding or removing the appropriate number of repeated elements.
// Make the form field "tfMail" repeatable
$("[data-name='tfMail']").dynamic();
// Set the number of dynamically created items to 5.
$("[data-name='tfMail']").dynamic("setRowSize", 5);
The name of the method to invoke.
The number of rows to set, i.e. how many repeated items should exist.
This JQuery instance for chaining.
Markiert das Formularfeld als ungültig (wie die Funktion setError) und zeigt eine Fehlermeldung an (wie die
Funktion validate).
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 erleichtert dieses Vorgehen und zeigt sofort eine Fehlermeldung
an.
// Schreibt die Fehlermeldung "Ungültiger Wert" an das Element "tfIdNummer"
$('[data-name=tfIdNummer').error("Ungültiger Wert");
Die Fehlermeldung, die angezeigt werden soll. Darf nicht der leere String sein.
Diese JQuery-Instanz zum Verketten von Befehlen.
Markiert das Formularfeld als gültig und entfernt die Fehlermeldung.
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 erleichtert dieses Vorgehen und entfernt sofort die
Fehlermeldung an.
// Entfernt die Fehlermeldung vom Element "tfIdNummer"
$('[name=tfIdNummer').error();
Diese JQuery-Instanz zum Verketten von Befehlen.
Marks the form field as invalid by calling the function setError() and displays an error message
by calling the function validate().
Note that the setError function by itself only marks a form field as invalid without triggering the validation
process. This means that an error message is only shown later when the user either attempts to submit the form or
triggers a blur event on the field afterward.
// Writes the error message "Invalid value" to the element named "tfIdNumber"
$("[data-name='tfIdNumber']").error("Invalid value");
The error message to be shown. Must not be the empty string.
This JQuery instance for chaining.
Marks the form field as valid and removes the error message.
Note that the setError function by itself only marks a form field as valid without triggering the validation
process. This means that the error message is only removed later when the user triggers a blur event on the
field.
// Removes the error message from the element named "tfIdNumber"
$("[data-name='tfIdNumber']").error();
This JQuery instance for chaining.
Fügt diesem Formularfeld eine Validierungsfunktion hinzu. Die Validierungsfunktion kann benutzt werden, um eigene Logik für die Validierung zu implementieren.
Die Validierungsfunktion wird jedes Mal 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!";
});
Validierungsfunktion, welche während der Validierung aufgerufen wird. Ist das Formularfeld ungültig, muss diese Validierungsfunktion eine nichtleere Zeichenkette mit der Fehlermeldung zurückgegeben. Ist das Formularfeld gültig, muss diese Validierungsfunktion die leere Zeichenkette zurückgeben.
Diese JQuery-Instanz zum Verketten von Befehlen.
Adds a validator function to the form element. The validator function is called each time the form field needs to be validated. This can be used to implement custom validation logic.
If multiple validator functions were added, all of them are called during validation; and all error messages will be shown.
Please note that data validation and required fields are different. If a field is required, validation first checks whether a value was entered. An error message is shown in case it is empty. It is only when the field is non-empty that the validatior function is called. In other words, an error will be shown for required fields that are empty, irrespective of the given validator function.
// The datatype of the field 'tfEmail' was set to 'email'
// We add additional validation rule to require that the host must be either 'example.com' or 'example.de'
$('[name="tfEmail"]').errorFunc(function() {
var value = this.val() || "";
var hostIndex = value.indexOf("@");
var host = hostIndex >= 0 ? value.substr(hostIndex + 1) : "";
if (host === "example.com" || host === "example.de") return "";
return "The host must be either example.de or example.com";
});
Function called upon form field validation. Returns a string representing the error message. To indicate that the form field is valid, return the empty string.
This JQuery instance for chaining.
Jedes Formularfeld besteht aus mehreren Elementen, etwa Leittexten (label), Eingabefeldern und Fehlertexten.
Diese befinden sich alle in einem Container-Element. Diese Funktion liefert dieses Container-Element zurück.
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 Texteingabefeld namens tfName liefert $("[data-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 $("[data-name='tfName']").getContainer() liefert etwa folgendes HTML-Element:
<div class="xm-item-div label-top CXTextField ctfName" cn="XTextField" data-xi="xi-tf-8" data-xn="tfName">
...
<input id="xi-tf-16" name="tfName" class="XItem XTextField" title type="text">
...
</div>
Verhalten für wiederholte Elemente
Ein wiederholtes Formularelement ist ein Element, von dem ein Nutzer eine oder mehrere Kopien erstellen kann.
Wiederholte Felder werden für die Eingabe von dynamischen Datensätzen verwendet, etwa für die Adressdaten
mehrerer Personen. Das Element mit der Klasse xm-item-div ist der Container, welcher alle dynamisch erzeugten
Elemente enthält. Jedes erzeugte dynamische Element wiederum befindet sich in einem Container mit der Klasse
dynamic-row. Standardmäßig liefert diese Methode immer diesen xm-item-div Container zurück. Ist das
optional boolesche Flag returnRepetitionContainer auf true gesetzt, wird stattdessen die dynamic-row
zurückgegeben. Falls beispielsweise das Textfeld mit dem Namen tfMail wiederholt ist, dann selektiert
$("[data-org-name='tfMail']).eq(1) das zweite dynamisch erzeugte Textfeld und
$("[data-org-name='tfMail']).eq(1).getContainer() dementsprechend die zweite dynamic-row innerhalb des
xm-item-div.
<div class="xm-item-div label-top CXTextField ctfMail" data-cn="XTextField"
data-xi="xi-tf-2" data-xn="tfMail" id="xi-tf-2-xc" data-name="tfMail">
<div data-dynamic-row="0" class="dynamic-row" id="xi-tf-8-xc_c_0">
<input id="xi-tf-8" name="tfMail_dyn_tfMail_0" class="XItem XTextField" type="text">
</div>
<div data-dynamic-row="1" class="dynamic-row" id="xi-tf-8-xc_c_1">
<input id="xi-tf-8" name="tfMail_dyn_tfMail_1" class="XItem XTextField" type="text">
</div>
<!-- ... -->
</div>
OptionalreturnRepetitionContainer: booleantrue um den Container einer Elementwiederholung zurückzugeben (falls das
selektierte Element ein wiederholtes Element ist), false um immer den Hauptcontainer mit der Klasse
xm-item-div zurückzugeben. Wenn nicht angegeben, ist der Standardwert false.
Das Container-Element des Formularfelds. Wenn es sich nicht um ein Formularfeld handelt und somit kein Container gefunden werden kann, eine leere JQuery-Instanz.
Every form field consists of multiple elements, such as labels, input fields, container elements etc. Each form field is wrapped inside a container element. This function returns that container.
Container elements are DIV elements with the CSS class xm-item-div and the attribute xn set to the name of
the form element.
Given a text input field named tfName, the call to $("[data-name='tfName']") might return the following HTML
element:
<input id="xi-tf-16" name="tfName" class="XItem XTextField" type="text">
And finding the container via $("[data-name='tfName']").getContainer() would return
<div class="xm-item-div label-top CXTextField ctfName" cn="XTextField" data-xi="xi-tf-8" data-xn="tfName">
...
<input id="xi-tf-16" name="tfName" class="XItem XTextField" type="text">
...
</div>
Behavior for repeated elements
A repeated form element is an element of which the user may create one or more copies. They are used to enter
dynamic data, such as the address data of multiple persons. The xm-item-div is the container that contains all
dynamically created reptitions of the form element. Each repetition in turn put inside a container with the class
dynamic-row. By default, this method always returns the xm-item-div container. When the optional flag
returnRepetitionContainer is set to true, this method returns the dynamic-row instead. For example, if the
input text element with the name tfMail is repeated, $("[data-org-name='tfMail']).eq(1) selects the second
repetition and $("[data-org-name='tfMail']).eq(1).getContainer() returns the second dynamic-row container
inside the xm-item-div.
<div class="xm-item-div label-top CXTextField ctfMail" data-cn="XTextField"
data-xi="xi-tf-2" data-xn="tfMail" id="xi-tf-2-xc" data-name="tfMail">
<div data-dynamic-row="0" class="dynamic-row" id="xi-tf-8-xc_c_0">
<input id="xi-tf-8" name="tfMail_dyn_tfMail_0" class="XItem XTextField" type="text">
</div>
<div data-dynamic-row="1" class="dynamic-row" id="xi-tf-8-xc_c_1">
<input id="xi-tf-8" name="tfMail_dyn_tfMail_1" class="XItem XTextField" type="text">
</div>
<!-- ... -->
</div>
OptionalreturnRepetitionContainer: booleantrue to return the container of an individual repetition (when the current
jQuery selection is a repeated element), false to always return the main xm-item-div container. Defaults to
false when not specified.
The container element of this form field. When the element is not a form element, or an element without a container, an empty JQuery instance is returned.
Jedes Formularfeld besteht aus mehreren Elementen, etwa Leittexten (label), Eingabefeldern und Fehlertexten.
Formularfelder zum Eingeben von Daten wie Texteingabefelder oder Auswahlfelder haben einen Leittext. Diese
Funktion liefert dieses Leittext-Element zurück.
// Liefert vom Eingabefeld "tfMail" den Text des Labels zurück, z.B. "Ihre E-Mail-Addresse"
$("[data-name='tfMail']").getLabel().text();
// Liefert von einem wiederholten Element "tfAngestellte" den Text des
// zweiten Labels zurück, z.B. "Name des 2. Angestellten"
$($('[data-org-name=tfAngestellte]').get(1)).getLabel().text();
Ein Feld mit allen Leittext-Elementen (label) der Formularfelder. Wenn ein Formularfeld keine Leittext
hat, wird kein Eintrag in das Feld geschrieben.
Every form field consists of multiple elements, such as labels, input fields, container elements etc. Input fields such as text input fields or select elements have got a label, this function returns that label.
// Returns the label text for the text field tfMail, e.g. "Your email address"
$("[data-name='tfMail']").getLabel().text();
// Returns the label text of the second instance of a repeat
// input field names "tfEmployees", e.g. "Name of 2nd employee"
$($("[data-org-name='tfEmployees']").get(1)).getLabel().text();
An array with all existing labels for the selected form fields.
Prüft, ob an dem Element ein HTML-Attribut mit dem gegebenen Namen existiert.
Falls etwa folgendes HTML vorliegt:
<input name="tfMail" placeholder></input>
Dann verhält sich diese Funktion wie folgt:
$("[data-name='tfMail']").hasAttr("name"); // true
$("[data-name='tfMail']").hasAttr("placeholder"); // true
$("[data-name='tfMail']").hasAttr("id"); // false
Names des zu prüfenden HTML-Attributs.
Ob das Element ein Attribut mit dem gegebenen Name hat.
Checks an HTML attribute with the given name is set on the element.
Assume the HTML look as follows:
<input name="tfMail" placeholder></input>
Then this function return the following values:
$("[data-name='tfMail']").hasAttr("name"); // true
$("[data-name='tfMail']").hasAttr("placeholder"); // true
$("[data-name='tfMail']").hasAttr("id"); // false
Name of the attribute to check for.
Whether this element has the given attribute set.
Wandelt ein Eingabefeld (input oder textarea) in ein jSignature-Feld um. Hier kann der Nutzer dann eine
handschriftliche Unterschrift mit der Maus oder einem Stift auf einem berührungsempfindlichen Bildschirm
eingeben.
Optionaloptions: Partial<JSignature.Settings>Optionale Einstellungen für jSignature, etwa Strichfarbe oder Strichbreite.
Diese JQuery-Instanz zum Verketten von Befehlen.
Wandelt ein Eingabefeld (input oder textarea) in ein jSignature-Feld um. Hier kann der Nutzer dann eine
handschriftliche Unterschrift mit der Maus oder einem Stift auf einem berührungsempfindlichen Bildschirm
eingeben.
Name der aufzurufenden Methode.
Optionaloptions: Partial<JSignature.Settings>Optionale Einstellungen für jSignature, etwa Strichfarbe oder Strichbreite.
Diese JQuery-Instanz zum Verketten von Befehlen.
Leert das Unterschriftenfeld und den Datenspeicher. Stellt auch die Unterschriftenlinie und andere Dekorelemente wieder her.
Diese JQuery-Instanz zum Verketten von Befehlen.
Zerstört diese jSignature-Instanz und stellt das ursprüngliche Eingabefeld wieder her.
Diese JQuery-Instanz zum Verketten von Befehlen.
Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.
Das Datenformat ist hierbei das von Canvas nativ genutzte Format - eine Daten-URL mit Base64-enkodierten
PNG-Bitmap-Informationen und sieht wie folgt aus: data:image/png;base64,i1234lkj123;k4;l1j34l1kj3j....
OptionaldataFormat: "default"Die aktuelle Signatur als Daten-URL.
Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.
Das Datenformat ist hierbei das von jSignature verwendete Format zum Zeichnen von mehrere Strichen, also einem
Feld aus Objekten mit den Eigenschaften x und y, welche beide ein Feld aus Zahlen sind. Diese Datenstruktur
wurde mit dem Ziel gewählt, Geschwindigkeit und Effizienz beim Sammeln von Strichdatenpunkten zu erreichen. Auch
wenn es sich um eine weniger intuitive Datenstruktur handelt, so erlaubt sie (a) schnell neue Koordinaten
einzufügen, ohne für jede Koordinate ein neues Objekt erzeugen zu müssen und (b) eine einfache Iteration über die
Daten mittels Schleifen. Diese Datenstruktur könnte in einen JSON-String umgewandelt werden und zum Speichern
verwendet werden, allerdings wird davon abgeraten, da es sich um ein internes Format handelt, welche sich in
künftigen Versionen ändern kann. Für ein direktes, kompaktes Format, welches ähnlich zu JSON ist, wird base30
empfohlen. Dieses native Datenformat ist gut zum Ermitteln von statistischen Informationen (Strichanzahl, Position
der Unterschrift auf dem Canvas) und um Striche zu editieren (wie etwa zum Rückgängigmachen des letzten
gezeichneten Strichs).
Die aktuelle Signatur.
Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.
Dieses Datenformat ist ein an Base64 orientiertes komprimiertes Format mit dem Ziele hoher Kompaktheit und
nativer URL-Kompatibilität. Es handelt sich um eine native Datenstruktur aller Vektoren, welche in eine kompakte
Zeichenkettendarstellung umgewandelt wird. Eine mögliche Weise zum Übertragen der Daten auf den Server besteht
im Format JSONP, welches in der Praxis eine URL-Längenbeschränkung von 2000 Zeichen aufweist (falls IE
unterstützt wird). Dieses Kompressionsformat ist nativ URL-kompatibel und benötigt keine zusätzliche Maskierung
von Sonderzeichen und benötigt zugleich auf für komplexe Unterschriften nicht mehr als 2000 Zeichen.
Die aktuelle Signatur.
Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.
Dieses Datenformat erzeugt aus der aktuellen Signatur ein SVG-Bild (SVG XML text). Alle Striche werden von Rauschen befreit und geglättet. Dieses Format stellt einen Kompromiss zwischen "einfach zum Anschauen" und "hochgradig skalierbar" dar. Die meisten aktuellen Browser unterstützen direkt das Anschauen von SVG-Bildern und zudem kann dieses Format grenzenlos skaliert und für den Druck aufbereitet werden. Die Daten liegen als schlichter Text (plain text) vor und können daher einfach übertragen und gespeichert werden.
Die aktuelle Signatur.
Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.
Ähnliche Funktionalität wie das Datenformat "svg", mit dem Unterschied, dass der SVG XML text als Base64
komprimiert wird. Obwohl die meisten Browser nun über native Base64-Kodierer verfügen (btoa()), gibt es
einige Browser wie den Internet Explorer, welche dies darüber nicht verfügen. Für solche Browser wird daher
eine eigene software-seitige Implementierung von btoa() benutzt, falls diese Funktion nicht zur Verfügung
steht.
Die aktuelle Signatur.
Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.
Dieses Format ist ähnlich dem Format native, aber in seine Bestandteile zerlegt, sodass der Mime-Type und
die Daten separate Einträge in einer Feldstruktur sind, ähnlich wie beim Format svg.
Das Datenformat sieht beispielsweise wie folgt aus:
["image/png;base64","i123i412i341jijalsdfjijl234123i..."]
Da der Bildexport vom Browser-Support abhängt und mehr Daten als notwendig zurückliefert, wird dieses Format nur zum Testen und zur Entwicklung empfohlen.
Name des Datenformats der zurückgelieferten Daten.
Die aktuelle Signatur.
Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.
Name der aufzurufenden Methode.
Datenformat, in dem die zurückgelieferten Daten formatiert sein sollen.
Die aktuelle Signatur.
Name der aufzurufenden Methode.
Daten der Unterschrift, die gesetzt werden soll.
Name des Datenformats der zurückgelieferten Daten.
Diese JQuery-Instanz zum Verketten von Befehlen.
Name der aufzurufenden Methode.
Daten der Unterschrift, die gesetzt werden soll.
Name des Datenformats der zurückgelieferten Daten.
Diese JQuery-Instanz zum Verketten von Befehlen.
Name der aufzurufenden Methode.
Daten der Unterschrift, die gesetzt werden soll. Das Datenformat wird aus dem ersten Element des Felds genommen. Das zweite Element stellt die eigentlichen Daten dar.
OptionaldataFormat: TOptional. Wenn gegeben, muss es mit dem ersten Eintrag des Felds des Parameters dataObject
übereinstimmen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Name der aufzurufenden Methode.
Daten der Unterschrift, die gesetzt werden soll. Muss in dem angegebenen Format formatiert sein.
Datenformat der Daten.
Diese JQuery-Instanz zum Verketten von Befehlen.
Listet alle Plugin auf, die zum Exportieren beziehungsweise zum Importieren der Unterschriftsdaten zur Verfügung stehen.
Name der aufzurufenden Methode.
Kategorie der zurückzuliefernden Plugins, entweder import oder export.
Eine Liste mit allen Plugins der gegebenen Kategorie.
Markiert das Canvas als schreibgeschützt und deaktiviert die jSignature-Schaltflächen.
Name der aufzurufenden Methode.
Diese JQuery-Instanz zum Verketten von Befehlen.
Hebt den Schreibschutz des Canvas auf und aktiviert die jSignature-Schaltflächen.
Name der aufzurufenden Methode.
Diese JQuery-Instanz zum Verketten von Befehlen.
Prüft, ob seit der Initialisierung eine Eingabe am Unterschriftenfeld getätigt wurden.
Name der aufzurufenden Methode.
true, falls die Unterschrift geändert wurde, andernfalls false.
Name der aufzurufenden Methode.
Die derzeitigen Einstellungen der jSignature-Instanz.
Setzt einen anderen Wert für die gegebene Einstellungen.
Dies ermöglicht es etwa, Einstellungen wie die Strichbreite oder die Linienfarbe zu ändern. Das dritte Argument legt fest, ob die Unterschrift sofort mit der Einstellungen aktualisiert werden soll. Das sofortige Anwenden der Einstellungen funktioniert derzeit nur mit einigen Einstellungen wie derFarbe.
Name der aufzurufenden Methode.
Name der zu ändernden Einstellung.
Neuer Wert der Einstellung.
OptionalapplyImmediately: booleanWenn true, wird die geänderte Einstellungen sofort auf die aktuelle Unterschrift
angewendet. Wenn false, wird der neue Wert der Einstellung nur auf künftigen Striche angewendet.
Der neue Wert der Einstellung.
Converts an input or textarea element to a jSignature field. This lets the user draw their signature by using
their mouse or a stylus with a touch-sensitive screen.
Optionaloptions: Partial<JSignature.Settings>Optional settings for JSignature.
This JQuery instance for chaining.
Converts an input or textarea element to a jSignature field. This lets the user draw their signature by using
their mouse or a stylus with a touch-sensitive screen.
The name of the method to invoke.
Optionaloptions: Partial<JSignature.Settings>Optional settings for JSignature.
This JQuery instance for chaining.
Just clears the signature pad, data store (and puts back signature line and other decor).
The name of the method to invoke.
This JQuery instance for chaining.
Destroy the instance and restores the original input or textarea element.
The name of the method to invoke.
This JQuery instance for chaining.
Returns the current stroke data.
The data format is that produced natively by Canvas - data-url-formatted, base64 encoded (likely PNG) bitmap data
that looks like this: data:image/png;base64,i1234lkj123;k4;l1j34l1kj3j....
This export call returns a single data-url-formatted string.
The name of the method to invoke.
OptionaldataFormat: "default"The name of the data format in which to return the data.
The current signature.
Returns the current stroke data.
This data format is a custom representation of drawing strokes as an array of objects with the properties x and
y, each of which is an array. This JavaScript objects structure is the actual data structure where each of the
drawing strokes is stored in jSignature. The structure is designed specifically for speed and efficiency of
collecting strokes data points. (Although it is a bit counter-intuitive, octopus-looking structure, it (a) allows
to pile up two-axis coordinates fast without a need to create a Point objects for each data point and (b)
provides for very easy loop-based processing of data.) Although you could convert that to JSON, pass it around, parse,
render from this, it may not be the most efficient way to store data, as internal format may change in other
major versions of jSignature. I recommend looking at base30 format as a direct, but compact equivalent to
"native"-as-JSON. What this data is good for is running stats (size, position of signature on the canvas) and
editing strokes (allowing for undo last stroke, for example).
The name of the method to invoke.
The name of the data format in which to return the data.
The current signature.
Returns the current stroke data.
This data format is a Base64-spirited compression format tuned for absurd compactness and native URL-compatibility. It is a native data structure compressed into a compact string representation of all vectors. One of possible ways of communicating the data to the server is JSONP, which has a practical URL length limit (if IE is supported) of no more than 2000 characters. This compression format is natively URL-compatible without a need for re-encoding, yet will fit into 2000 characters for most non-complex signatures.
The name of the method to invoke.
The name of the data format in which to return the data.
The current signature.
Returns the current stroke data.
This data format produces the signature as an SVG image (SVG XML text). All strokes are denoised and smoothed. This format is a good medium between "easy to view" and "highly scalable." Viewing SVGs is natively supported in the majority of today's browsers and, yet, this format can be infinitely scaled and enhanced for print. Data is textual, allowing for easy storage and transfer.
The name of the method to invoke.
The name of the data format in which to return the data.
The current signature.
Returns the current stroke data.
This is same as "svg" plugin, but the SVG XML text is compressed using base64 encoding. Although many browsers now have built-in base64 encoder ( btoa() ), some, like Internet Explorer do not. This plugin has its own (short and efficient) copy of software-based base64 encoder which is invoked on the browsers lacking btoa().
The name of the method to invoke.
The name of the data format in which to return the data.
The current signature.
Returns the current stroke data.
This data format is essentially same as native format, but parsed apart so that mimetype and data are separate
objects in an array structure similar to that produced by "svg" export. Example (shortened)
["image/png;base64","i123i412i341jijalsdfjijl234123i..."]. Because image export filter depends on (somewhat
flaky) browser support and picks up needless data, recommend using this only for demonstration and during
development.
The name of the method to invoke.
The name of the data format in which to return the data.
The current signature.
Returns the current stroke data.
The name of the method to invoke.
The name of the data format in which to return the data.
The current signature.
The name of the method to invoke.
The signature to be set.
The name of the data format in which to return the data.
This JQuery instance for chaining.
The name of the method to invoke.
The signature to be set.
The name of the data format in which to return the data.
This JQuery instance for chaining.
The name of the method to invoke.
The signature to be set. The data format is taken from the first entry in the array. The second entry represents the actual data.
OptionaldataFormat: TOptional. If given, must be the same as the first entry in the data object array.
This JQuery instance for chaining.
The name of the method to invoke.
The signature to be set. It must be formatted according to the given data format.
The name of the data format in which to return the data.
This JQuery instance for chaining.
List all plugins that support importing / exporting data.
The name of the method to invoke.
The category of plugins to return.
A list of plugins for the given category.
Makes the canvas read-only and disable the jSignature buttons
The name of the method to invoke.
This JQuery instance for chaining.
Makes the canvas writable again and enables the jSignature buttons.
The name of the method to invoke.
This JQuery instance for chaining.
Checks whether any signature was drawn since the signature input field was initialized.
The name of the method to invoke.
true iff the jSignature was modified, false otherwise.
The name of the method to invoke.
The settings of the jSignature instance.
Updates the given setting with a new value.
This allows you to update certain settings like lineWidth or line color and with the third argument you can make the change apply to the existing strokes. At present, updating change to existing strokes only works with a few settings like color.
The name of the method to invoke.
Name of the setting to modify.
New value of the setting.
OptionalapplyImmediately: booleanPass true iff the change should affect current signature or future strokes.
The updated value.
Attach an event handler function for one or more events to the selected elements.
One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
Data to be passed to the handler in event.data when an event is triggered.
A function to execute when the event is triggered.
Attach an event handler function for one or more events to the selected elements.
One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
Data to be passed to the handler in event.data when an event is triggered.
A function to execute when the event is triggered.
Attach an event handler function for one or more events to the selected elements.
One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
Data to be passed to the handler in event.data when an event is triggered.
A function to execute when the event is triggered.
Attach an event handler function for one or more events to the selected elements.
One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
p {
background: yellow;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
p.over {
background: #ccc;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
var count = 0;
$( "body" ).on( "click", "p", function() {
$( this ).after( "<p>Another paragraph! " + (++count) + "</p>" );
});
</script>
</body>
</html>
Attach an event handler function for one or more events to the selected elements.
One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
Data to be passed to the handler in event.data when an event is triggered.
A function to execute when the event is triggered.
Attach an event handler function for one or more events to the selected elements.
One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
@param selector_data
selector — A selector string to filter the descendants of the selected elements that trigger the event. If the
selector is null or omitted, the event is always triggered when it reaches the selected element. data — Data to be passed to the handler in event.data when an event is triggered.A function to execute when the event is triggered.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
p {
background: yellow;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
p.over {
background: #ccc;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
var count = 0;
$( "body" ).on( "click", "p", function() {
$( this ).after( "<p>Another paragraph! " + (++count) + "</p>" );
});
</script>
</body>
</html>
$( "body" ).on( "click", "p", function() {
alert( $( this ).text() );
});
Attach an event handler function for one or more events to the selected elements.
One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.
$( "p" ).on( "click", function() {
alert( $( this ).text() );
});
$( "form" ).on( "submit", false );
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
});
$( "form" ).on( "submit", function( event ) {
event.stopPropagation();
});
$( "div" ).on( "click", function( event, person ) {
alert( "Hello, " + person.name );
});
$( "div" ).trigger( "click", { name: "Jim" } );
$( "div" ).on( "click", function( event, salutation, name ) {
alert( salutation + ", " + name );
});
$( "div" ).trigger( "click", [ "Goodbye", "Jim" ] );
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
p {
color: red;
}
span {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>
$( "p" ).on( "myCustomEvent", function( event, myName ) {
$( this ).text( myName + ", hi there!" );
$( "span" )
.stop()
.css( "opacity", 1 )
.text( "myName = " + myName )
.fadeIn( 30 )
.fadeOut( 1000 );
});
$( "button" ).click(function () {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
</script>
</body>
</html>
Attach an event handler function for one or more events to the selected elements.
One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
A function to execute when the event is triggered.
$( "p" ).on( "click", function() {
alert( $( this ).text() );
});
$( "form" ).on( "submit", false );
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
});
$( "form" ).on( "submit", function( event ) {
event.stopPropagation();
});
$( "div" ).on( "click", function( event, person ) {
alert( "Hello, " + person.name );
});
$( "div" ).trigger( "click", { name: "Jim" } );
$( "div" ).on( "click", function( event, salutation, name ) {
alert( salutation + ", " + name );
});
$( "div" ).trigger( "click", [ "Goodbye", "Jim" ] );
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
p {
color: red;
}
span {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>
$( "p" ).on( "myCustomEvent", function( event, myName ) {
$( this ).text( myName + ", hi there!" );
$( "span" )
.stop()
.css( "opacity", 1 )
.text( "myName = " + myName )
.fadeIn( 30 )
.fadeOut( 1000 );
});
$( "button" ).click(function () {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
</script>
</body>
</html>
Attach an event handler function for one or more events to the selected elements.
An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.
Data to be passed to the handler in event.data when an event occurs.
Attach an event handler function for one or more events to the selected elements.
An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.
Data to be passed to the handler in event.data when an event occurs.
Attach an event handler function for one or more events to the selected elements.
An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.
Attach an event handler function for one or more events to the selected elements.
An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
Data to be passed to the handler in event.data when an event occurs.
Attach an event handler function for one or more events to the selected elements.
An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
.test {
color: #000;
padding: .5em;
border: 1px solid #444;
}
.active {
color: #900;
}
.inside {
background-color: aqua;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="test">test div</div>
<script>
$( "div.test" ).on({
click: function() {
$( this ).toggleClass( "active" );
}, mouseenter: function() {
$( this ).addClass( "inside" );
}, mouseleave: function() {
$( this ).removeClass( "inside" );
}
});
</script>
</body>
</html>
Muss direkt auf das Formularelement (FORM.xm-form) aufgerufen werden.
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ückruffunktion, 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();
});
Der Name des Ereignisses, also addRow.
Rückruffunktion für das Ereignis beim Hinzufügen eines Elements. Sie erhält als Parameter das
auslösende Ereignis (meistens click) und den Container mit dem dynamisch erzeugten Element.
Diese JQuery-Instanz zum Verketten von Befehlen.
Muss direkt auf das Formularelement (FORM.xm-form) aufgerufen werden.
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();
});
Der Name des Ereignisses, also delRow.
Rückruffunktion, wenn ein dynamisches Element entfernt wurde. Sie erhält als Parameter das
auslösende Ereignis (meist click) und den (nicht mehr im DOM eingehängten) Container mit dem entfernten
dynamischen Element.
Diese JQuery-Instanz zum Verketten von Befehlen.
Erlaubt es, eine Rückruffunktion zu registrieren, welche aufgerufen wird, sobald dass Formular vollständig dargestellt und initialisiert wurde.
Der Name des Ereignisses, also ready.
Rückruffunktion, welche aufgerufen wird, sobald dass Formular vollständig dargestellt und initialisiert wurde.
Must be called directly on the form element (FORM.xm-form).
This allows you to register a global callback that is notified when a row was added to a repeatable element. A repeatable element is a form field of which the user can create multiple copies of, e.g. for entering multiple email addresses.
Compared with the callback that can be registered with the function dynamic, this is a global callback that
is called whenever a row is added to any repeatable element within the form. It is useful when you repeat an
element in the designer and not via JavaScript.
// Initialize newly added rows with the "cob2auto" function (autocomplete)
$('FORM.xm-form').on("addRow", function(_, data) {
data.container.find(".XSelect").cob2auto();
});
The name of the event, i.e. addRow.
Callback for the add row event. It receives the container containing the newly created element.
This JQuery instance for chaining.
Must be called directly on the form element (FORM.xm-form).
This allows you to register a callback that is notified when a row was removed from a repeatable element. A repeatable element is a form field of which the user can create multiple copies of, e.g. for entering multiple email addresses.
Compared with the callback that can be registered with the function dynamic, this is a global callback that
is called whenever a row is removed from any repeatable element within the form. It is useful when you repeat an
element in the designer and not via JavaScript.
// Compute shipping costs again when an element was removed
$('FORM.xm-form').on("delRow", function(_, data) {
recalculateShippingCosts();
});
The name of the event, i.e. delRow.
Callback for the row deletion event. It receives the container containing the deleted repeatable element. Note that it was already removed from the DOM.
This JQuery instance for chaining.
Lets you register a callback that is invoked when the form is rendered and completely initialized.
The name of the event, i.e. ready.
A callback that is invoked when the form is rendered and completely initialized.
Entfernt das kleine rote Sternchen neben dem Leittext eines Formularfelds, welches angibt, ob es sich bei dem Formularfeld um ein Mussfeld handelt.
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 angezeigt. Um zu ändern, ob das Feld ein Mussfeld ist, sollte
die Funktion setRequired benutzt werden.
Diese JQuery-Instanz zum Verketten von Befehlen.
Removes the little red star icon next to the label of the form field that indicates whether the form field is a required field.
Currently, this icon is a SPAN element with the class required-star. Note that this may be subject to change:
<span class="required-star">*</span>
For example:
$('input[data-name=tf2]').removeStar() // Removes the star from the label of the form field tf2.
This function only changes its appearance, but does not make the form field a required field. To set whether a form field is required, use the function "setRequired".
This JQuery instance for chaining.
Diese Methode ist veraltet und sollte nicht mehr benutzt werden, dass sie Formular anfällig für XSS-Angriffe (Cross-Site-Scripting) macht.
Es können etwa XUtil.getFormParam|$.xutil.getFormParam und JQuery-Methoden wie JQuery.text|$.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!.
Diese JQuery-Instanz zum Verketten von Befehlen.
This method was deprecated as it makes the form vulnerable to XSS (cross-site scripting) attacks.
Use XUtil.getFormParam|$.xutil.getFormParam and JQuery methods such as JQuery.text|$.fn.text to insert data from URL parameters into the form.
Takes the HTML of the given element (the innerHTML) and replaces certain patterns with the values from the
URL parameters. This uses the URL parameters of the URL that was used to open the form.
The following patterns are replaced. KEY represents the name of the URL parameter:
{KEY}
For each URL parameter, the first occurrence of the above pattern is replaced with the value of the URL parameter
named KEY. For example, assume a form is accessed via the following URL:
http://localhost/formcycle/form/provide/1?name=world
The form contains a text input field with the name tfGreeting and the Hello, {name}!:
// Takes the innerHTML of the container element and replaces "{name}" with "{world}"
$("[xn='tfGreeting']").replaceParams();
The label of the input field now becomes Hello, world!.
This JQuery instance for chaining.
Ändert den Datentypen eines Texteingabefelds (einzeiliges Eingabefeld oder mehrzeiliges Eingabefeld). Die folgenden Datentypen stehen zur Verfügung:
22.05.1990.3, 0 oder -21.127.0.0.1 oder 10.42.42.13.2,00, -3,95, 0,00 oder 897345,38.0.03, -99.2 oder 42.0234995483 oder +49 351 4459654.02349. Prüft nicht, ob es solch eine Postleitzahl tatsächlich in Deutschland gibt.0, 3 oder 123.0,00 oder 2,34.0,00, 0, 3,4 oder 3.hh:mm, z.B. 22:05 or 03:42.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.
Der neue Datentyp für das Eingabefeld.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt den Datentypen eines Texteingabefelds (einzeiliges Eingabefeld oder mehrzeiliges Eingabefeld). Es kann nun ein beliebiger Wert eingegeben werden. Es wird nicht mehr validiert, ob es sich um eine gültige E-Mail-Adresse, Postleitzahl etc. handelt.
Beispiel:
// Prüft nun nicht mehr, ob eine gültige E-Mail-Adresse eingegeben wurde.
$('[name="tfMail"]').setDataType()
Diese JQuery-Instanz zum Verketten von Befehlen.
Sets the data type of a text input field (input or textarea). The following data types are available:
22.05.1990.james@john.org or θσερ@εχαμπλε.ψομ.3, 0, or -21.127.0.0.1 or 10.42.42.13.2,00, -3,95, 0,00 or 897345,38.0.03, -99.2, or 42.0234995483 or +49 351 4459654.02349. Does not check whether such a code is actually registered within Germany.0, 3, oder 123.0,00 or 2,34.0,00, 0, 3,4, or 3.hh:mm, e.g. 22:05 or 03:42.http://example.com or https://www.james.org.For example:
// Checks whether a valid mail address was entered.
$('[data-name="tfMail"]').setDataType("email")
When the data type was set to date, a calendar for picking a date will be shown. If you later decide to change
the datatype with this function, the calendar still shows up. If, on the other hand, you set the datatype to
another value in the designer and later decide to change it to date with this function, no calendar will show
up. Use the jQuery.fn.datepicker method to enable or disable the calendar when necessary.
The data type can also be set in the contraints section of the properties panel of the designer.
Currently, this uses the HTML attribute type and vdt, but this is subject to change.
The new data type for the input text field.
This JQuery instance for chaining.
Removes the data type of an input text field. This allows any value to be entered, not checking anymore whether it is a valid number, ZIP code etc.
For example:
// Removes the check for whether a valid mail address was entered.
$('[data-name="tfMail"]').setDataType()
This JQuery instance for chaining.
Markiert ein Formularfeld als ungültig und setzt die Fehlermeldung.
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 Fehlernachricht, die am Element angezeigt werden soll.
Diese JQuery-Instanz zum Verketten von Befehlen.
Markiert das Formularfeld als gültig und entfernt die Fehlermeldung.
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 Funktion validate` kann die Validierung angestoßen werden, um die Fehlermeldung
sofort zu entfernen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Marks a form field as invalid and sets the given error message.
The error message does not appear immediately, but only once the user interacts with the form element, i.e. when a
blur or change event is triggered on the form field, or validation gets triggered otherwise, such as by
submitting the form. Use the function validate to trigger validation immediately and show the error message.
// Marks input field "tfName" as invalid and sets the error message.
$('[data-name="tfName"]').setError("Wrong name.");
// Validates the input field and displays the error message.
$('[data-name="tfName"]').validate();
Currently, this uses the HTML attribute error, but this is subject to change.
The error message to shown on the element.
This JQuery instance for chaining.
Marks the form field as valid and removes the error message so that no error is shown anymore.
The error message does not disappear immediately, but only once the user interacts with the form element, i.e. when a blur or change event is triggered on the form field. Use the function validate() to trigger validation immediately and show the error message.
This JQuery instance for chaining.
Setzt oder ändert die Mussfeldgruppe des Formularelements. Es können sich mehrere Formularelemente in einer Mussfeldgruppe befinden. Ein Formularelement ist nur dann gültig, wenn wenigstens ein Element aus der Mussfeldgruppe ausgefüllt wurde und einen Wert hat.
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.
Name der Mussfeldgruppe, die auf das Element gesetzt werden soll.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt die Mussfeldgruppen an dem Formularfeld.
Falls das Formularfeld zudem als Mussfeld markiert werden soll, kann die Funktion setRequired genutzt werden.
Diese JQuery-Instanz zum Verketten von Befehlen.
Sets the required group of a form element. The form element is valid if at least one form element of the required group is non-empty. It validates as invalid when no form element of the required group contains a value.
This function only changes the required group, it does not change whether the form element itself is required.
To illustrate this, assume the input field tf1 has already been marked as a required field in the XIMA
formcycle Designer, and no options have been set for input field tf2 yet. Both input fields are now added to
the required group group1 by this function. An error will appear even when tf1 is empty and tf2 contains a
value. To get the expected result, the required field marker for tf1 must be removed with setRequired.
// Add the input field "tf1" to the required group "group1"
$('[data-name=tf1]').setGroupReq("group1");
// Add the input field "tf2" to the required group "group1"
$('[data-name=tf2]').setGroupReq("group1");
// Marks the input field "tf1" as an optional field
$('[data-name=tf1]').setRequired(false);
You can also set the required group in the options panel of the designer as well. Note that this option only shows up when the form field has been marked as required.
Currently, required groups use the attribute vgr, but this is subject to change.
Arbitrary name of the required group for the input element.
This JQuery instance for chaining.
Removes the required group of a form element.
If you also want to mark the form element itself as required, use the function setRequired.
This JQuery instance for chaining.
Setzt oder ändert die Höchstanzahl an erlaubten ausgewählten Optionen eines Mehrfachauswahlelements.
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.
Die Höchstzahl an Optionen, die ausgewählt werden darf.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt die Einschränkung an die Höchstzahl an auswählbaren Optionen eines Mehrfachauswahlfelds.
Diese JQuery-Instanz zum Verketten von Befehlen.
Sets the maximum allowed number of the selected options of a select element.
This limit can also be set directly in the contraints section of the designer.
// At most three checkboxes or radiobuttons can be selected for the field "sel1"
$("[data-name='sel1']").setMaxCheckBox(3)
Currently, this function uses the HTML attribute vcmx, but this is subject to change.
The maximum number of checkboxes that can be checked.
This JQuery instance for chaining.
Removes the restriction on the maximum allowed number of selected options of a select element.
This JQuery instance for chaining.
Setzt oder ändert die Höchstlänge eines Eingabefelds, also die maximale Anzahl an Zeichen), die eingegeben werden dürfen.
// 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.
Höchstzahl (inklusiv) an erlaubten Zeichen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt die Einschränkung an die Höchstlänge eines Eingabefelds, also die maximale Anzahl an Zeichen, die eingegeben werden dürfen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Sets the maximum length (number of characters) of the text that can be entered into an input field.
// User cannot enter more than 9 characters in the field "tf1"
$('[data-name="tf1"]').setMaxLength(9)
This option can be set directly in the contraints section of the designer as well.
Currently, this uses the HTML attribute vmxl, but this is subject to change.
Maximum (inclusive) number of characters allowed.
This JQuery instance for chaining.
Removes the maximum length (number of characters) of the text that can be entered into an input field.
This JQuery instance for chaining.
Setzt oder ändert an einem nummerischen Eingabefeld die höchste erlaubte Zahl, die eingegeben werden darf.
// 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.
Der Höchstwert (inklusive), der für das Eingabefeld erlaubt ist.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt an einem nummerischen Eingabefeld die Einschränkung an die höchste erlaubte Zahl, die eingegeben werden darf.
Diese JQuery-Instanz zum Verketten von Befehlen.
For an input text field with numeric input, sets the largest allowed number.
// The value of the field "tf1" must be equal to or less than 9.
$('[data-name="tf1"]').setMaxValue(9)
This option can be set directly in the constraints section of the designer as well.
Currently, this uses the HTML attribute vmx, but this is subject to change.
The largest (inclusive) value allowed for the input field.
This JQuery instance for chaining.
For an input text field with numeric input, removes the restriction on the largest allowed number.
This JQuery instance for chaining.
Setzt oder ändert die Mindestanzahl an erlaubten ausgewählten Optionen eines Mehrfachauswahlelements.
// 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.
Die geringste Anzahl (inklusiv) an Optionen, die am Auswahlfeld ausgewählt werden müssen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt die Einschränkung der Mindestanzahl an erlaubten ausgewählten Optionen eines Mehrfachauswahlelements.
Diese JQuery-Instanz zum Verketten von Befehlen.
Sets the minimum allowed number of the selected options of a select element.
// At least one checkbox or radiobutton must be selected for the field "sel1"
$("[data-name='sel1']").setMinCheckBox(1);
This limit can also be set directly in the contraints section of the designer.
Currently, this function uses the attribute vcmn, but this is subject to change.
The minimum (inclusive) number of checkboxes that can be checked.
This JQuery instance for chaining.
Removes the restriction on the minimum allowed number of selected options of a select element.
This JQuery instance for chaining.
Setzt oder ändert die Höchstlänge eines Eingabefelds, also die minimale Anzahl an Zeichen, die eingegeben werden müssen.
// 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.
Mindestanzahl (inklusiv) an erlaubten Zeichen, die eingegeben werden müssen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt die Einschränkung an die Mindestlänge eines Eingabefelds, also die minimale Anzahl an Zeichen, die eingegeben werden müssen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Sets the minimum length (number of characters) of the text that can be entered into an input field.
// User must enter at least one character in the field "tf1".
$('[data-name="tf1"]').setMinLength(1);
This option can be set directly in the constraints panel of the formcycle designer as well.
Currently, this uses the HTML attribute vmnl, but this is subject to change.
Minimum (inclusive) number of characters allowed.
This JQuery instance for chaining.
Removes the minimum length (number of characters) of the text that can be entered into an input field.
This JQuery instance for chaining.
Setzt oder ändert an einem nummerischen Eingabefeld die geringste erlaubte Zahl, die eingegeben werden darf.
// 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.
Der geringste Wert (inklusiv), der für das Eingabefeld erlaubt ist.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt an einem nummerischen Eingabefeld die Einschränkung an die geringste erlaubte Zahl, die eingegeben werden darf.
Diese JQuery-Instanz zum Verketten von Befehlen.
For an input text field with numeric input, sets the smallest allowed number.
// The value of the field "tf1" must be equal to or greater than 1.
$('[data-name="tf1"]').setMinValue(1);
This option can be set directly in the constraints section of the designer as well.
Currently, this uses the HTML attribute vmn, but this is subject to change.
The smallest (inclusive) value allowed for the input field.
This JQuery instance for chaining.
For an input text field with numeric input, removes the restriction on the smallest allowed number.
This JQuery instance for chaining.
Setzt den Namen des Formularfelds, mit dem der Wert dieses Formularfelds übereinstimmen muss.
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
$('[data-name=tfMailWdh]').setMustEqual("tfMail");
Die Anwendung dieser Funktion ist nur für Textfelder und Textareas gedacht und könnte deshalb bei der Benutzung mit anderen Formularelement-Typen zu Fehlern führen.
Diese Einstellung kann auch direkt im XIMA formcycle-Designer festgelegt werden.
Derzeit wird das HTML-Attribut veq verwendet, dies wird sich allerdings ändern.
Name des referenzierten Formularfelds, mit dem der Wert dieses Felds übereinstimmen muss.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt die Einschränkung, dass der Wert dieses Formularfelds mit einem anderen Formularfeld übereinstimmen muss.
Diese JQuery-Instanz zum Verketten von Befehlen.
Sets the name of the form field whose value must be the same as the value of this form field. Assume there are
two field tf1 and tf2
An error message is displayed when the value of this form field is not the same as the value of the other field.
This option can also be set in the constraints section of the designer as well.
The use of this function is intended for text fields and text areas only and could therefore cause errors when used with other form element types.
Currently, this uses the attribute veq, however, this is subject to change.
// User must confirm the email address by entering it again, it must be equal to the previously entered email.
$('[data-name=tfMailRep]').setMustEqual("tfMail");
Name of the referenced form field this field must equal.
This JQuery instance for chaining.
Removes the restriction that the form field needs to equal another form field.
This JQuery instance for chaining.
Stellt ein, ob das Formularfeld ein Mussfeld ist. Ein Mussfeld ist ungültig, wenn kein Wert eingeben wurde.
// Der Nutzer muss im Feld "tfMail" eine (gültige) E-Mail-Adresse eingeben.
$('[data-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.
Wenn true, wird das Formularfeld als Mussfeld markiert. Wenn false, ist es kein Mussfeld mehr.
Diese JQuery-Instanz zum Verketten von Befehlen.
Changes whether the form field is a required form field and must be filled out.
// The user must enter a value into the form field "tf1".
$("[name='tf1']").setRequired(true);
This option can also be set directly in constraints section of the designer.
Currently, this uses the attribute vr, but this is subject to change.
If true, marks the form field as required. If false, the form field must not be filled out.
This JQuery instance for chaining.
Ein Formularfeld kann so eingestellt werden, dass es nur dann ein Mussfeld ist, wenn ein anderes Formularfeld einen bestimmten Wert hat. Diese Funktion erlaubt es, diese Abhängigkeit zu ä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
$('[data-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:
value nicht relevant).value den regulären Ausdruck als Zeichenkette).value das Format x-y, also z.B. 1-23).Der Name des Formularfelds, von dessen Wert es abhängen soll, ob dieses Feld ein Mussfeld ist.
Optionaltest: numberDie Art des Vergleichs, wie der Wert des anderen Formularfelds geprüft wird. Siehe oben für Details.
Wenn nicht gegeben, ist der Standardwert 0.
Optionalvalue: string | numberWert für den Vergleich, mit dem das andere Formularfeld verglichen wird. Standardwert ist die leere Zeichenkette.
Diese JQuery-Instanz zum Verketten von Befehlen.
Ein Formularfeld kann so eingestellt werden, dass es nur dann ein Mussfeld ist, wenn ein anderes Formularfeld einen bestimmten Wert hat. Diese Funktion entfernt diese Abhängigkeit.
Diese JQuery-Instanz zum Verketten von Befehlen.
You can set up a form field so that is required or optional depending on the value of another form field. This function allows you to change that dependency.
For example, assume you want an input field for an address that is required only when a country has been selected:
// Field named tfAddress is required iff field with name selCountry has a value.
$('[name="tfAddress"]').setRequiredIf("selCountry", 0);
This option can also be set in the constraints section of the designer.
Currently, this uses the HTML attributes vrif_c and FieldValidationsDescriptor.vrif_v vrif_v. Note that this is subject to change.
The following values are available for the type of test:
value.value must be a range in the format x-y, e.g. 2-37.@param name The name of the form field this field should depend on. @param test The type of dependency, i.e. how the values of the dependent field is checked to determine whether this field should be required. If not given, defaults to0`. See above for the allowed values.Optionaltest: numberOptionalvalue: string | numberValue for the comparison. If not given, defaults to the empty string.
This JQuery instance for chaining.
You can set up a form field so that is required depending on the value of another form field. This function removes that dependency.
This JQuery instance for chaining.
Fügt das kleine rote Sternchen neben dem Leittext eines Formularfelds hinzu oder entfernt es. Dieses Sternchen gibt an, ob es sich bei dem Formularfeld um ein Mussfeld handelt.
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]').showStar(false);
// Fügt das Sternchen dem Leittext des Formularfelds "tfName" hinzu.
$('input[name=tfName]').showStar(true);
Diese Funktion beeinflusst nur das Aussehen, ändert aber nicht, ob das Formularfeld ein Mussfeld ist. Ist das
Eingabefeld leer, werden daher weiter Fehlermeldungen angezeigt. Um zu ändern, ob das Feld ein Mussfeld ist, sollte
die Funktion setRequired benutzt werden.
true um das Sternchen anzuzeigen, false um es auszublenden.
Diese JQuery-Instanz zum Verketten von Befehlen.
Adds or removes the little red star icon next to the label of the form field that indicates whether the form field is a required field.
Currently, this icon is a SPAN element with the class required-star. Note that this may be subject to change:
<span class="required-star">*</span>
For example:
$('input[name=tf2]').showStar(false) // Removes the star from the label of the form field tf2.
$('input[name=tf2]').showStar(true) // Adds the star to the label of the form field tf2.
This function only changes its appearance, but does not make the form field a required field. To set whether a form field is required, use the function "setRequired".
true to display the star icon, false to hide the star icon.
This JQuery instance for chaining.
Bildet die Summe aller Formularfelder, wobei versucht wird, den Wert jedes Formularfelds als Zahl zu
interpretieren. Diese Methode sollte nur auf Textfelder und Textareas angewendet werden. Besonders nützlich ist
diese Methode für wiederholte Elemente, wenn die Werte aller dynamisch erzeugten Felder addiert werden sollen.
Es sollte beachtet werden, dass bei wiederholten Formularfeldern die einzelnen Eingabefelder über das Attribut
data-org-name und nicht über name selektiert werden sollten.
// Bildet die Summe aller dynamisch erstellten Kopien des Textfelds mit dem Namen "tfZahlungsbetrag".
var sum = $("[data-org-name='tfPayment']").sum();
Die (nummerische) Summe der Werte aller selektieren Formularfelder.
Takes the value of all form fields and interprets them as numbers. The sum of these numbers is then returned.
This method should only be used on input fields or text areas. It is especially useful for repeated input fields
when you want to add them together. Please note that for repeated form fields, you should select the individual
input fields with the attribute data-org-name instead of name:
// Returns the sum of all dynamically created copies of the input field named "tfPayment"
var sum = $("[data-org-name='tfPayment']").sum();
The (numerical) sum of the values of the selected form fields.
Validiert das Formularfeld und alle in ihm enthaltenen Formularfelder.
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
$("[data-name='tfId']").on("keydown", function(event) { $(event.target).validate(); });
// Überprüft das gesamte Formular
var isFormValid = $(".xm-form").validate();
Optionalsilent: booleanOptional, Standardwert false. Wenn true, wird keine Fehlernachricht an invalide Elemente
angefügt. Kann etwa nützlich sein, wenn nur geprüft werden soll, ob ein Element valide ist, ohne den Nutzer davon
in Kenntnis zu setzen.
true, wenn alle validierten Formularfelder gültig sind, false sonst.
Validates the form field and all fields it contains (when it is a container or fieldset). An error message is displayed for elements that are invalid. Invalid form fields are required form fields without a value as well as form fields with a restriction (such as the data type email).
By default, validation only triggers on a blur or change event, i.e. when the user switches to another form field or clicks anywhere else on the page. One use case for this function is to validate the input as the user types. Note however, that this requires more processing power and may be slow for very long forms.
// Validates the field "tf1" every time the user types a character.
$("[data-name='tfId']").on("keydown", function(event) { $(this).validate(); });
// Validates the entire form
var isFormValid = $(".xm-form").validate();
Optionalsilent: booleanOptional, default to false. When true, do not add any error messages to invalid elements. This
is useful, for example, when you only want to check whether an element is valid without alerting the user.
Whether the form field and all form fields it contains are valid.
Entfernt das gegebene Validationsattribut von dem Formularfeld. Dies ist eine Low-Level-Methode, es sollte eine der spezifischeren Methoden für Validationsattribute genutzt werden, wie etwa setRequired.
Name des zu entfernenden Validationsattributs.
Diese JQuery-Instanz zum Verketten von Befehlen.
Setzt das Validationsattribut für das Formularfeld auf den gegebenen Wert. Dies ist eine Low-Level-Methode, es sollte eine der spezifischeren Methoden für Validationsattribute genutzt werden, wie etwa setRequired.
Name des zu ändernden Validationsattributs.
Neuer Wert für das Validationsattribut. Wenn undefined, wird das Validationsattribut entfernt.
Diese JQuery-Instanz zum Verketten von Befehlen.
Removes the given validation attribute from the form field. This is a low-level method, you should use one of the more specific methods for validation attributes, such as setRequired.
Name of the validation attribute to remove.
This JQuery instance for chaining.
Set the validation attribute of the form field to the given value. This is a low-level method, you should use one of the more specific methods for validation attributes, such as setRequired.
Name of the validation attribute to change.
New value for the validation attribute. When undefined, the validation attribute is removed.
This JQuery instance for chaining.
Zeigt das Formularfeld an oder versteckt es. Diese Funktion sollte statt den JQuery-Funktionen hide und show
verwendet werden, da sie auch einige XIMA formcycle-spezifische Attribute aktualisiert.
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.
$("[data-name='tfNachname']").getContainer().visible(false);
Wenn true, wird das Formularfeld angezeigt. Wenn false, wird das Formularfeld versteckt.
Diese JQuery-Instanz zum Verketten von Befehlen.
Shows or hides the form field. This function should be preferred over the JQuery functions hide and show,
as it updates some XIMA formcycle specific attributes correctly.
A form field that is hidden or invisible cannot be invalid and as such never prevents the form from being submitted.
Please note: This method only changes the visibility state of the element on which it is called. For example, if you want to hide an entire container with the input field and the corresponding label, you can use:
// Make the form field "tf1" invisible, including the label
$("[data-name='tfFirstName']").getContainer().visible(false);
If true, shows the form field. If false, hides the form field.
This JQuery instance for chaining.
Fügt einen (standardmäßig kleinen roten) Stern an den Leittext eines Formularfelds hinzu. Dieser Stern gibt an, ob das Formularfeld ein Pflichtfeld ist.
Derzeit wird hierzu ein
SPAN-Element mit der Klasserequired-starerzeugt, dies kann sich ändern:Zum Beispiel:
Diese Funktion ändert nur das Aussehen, aber nicht, ob das Formularfeld ein Pflichtfeld ist. Um festzulegen, ob ein Feld ein Pflichtfeld ist, kann die Funktion
setRequiredverwendet werden.