JavaScript Beispiele Teil 3 zur Lösung von Anforderungen mit den Frontend Webassets
Hinweis: Diese Features sind Teil der Visforms Subscription und in der freien Visforms Version nicht enthalten.
Altersüberprüfung
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Code erst dann ablaufen lassen, nachdem das Formular seitens Visforms initialisiert wurde.
- Auf Änderungen durch den Benutzer reagieren.
- Ermitteln des Datums-Wertes als Text von einem Datums-Feld.
- Rechnen mit Datums-Wert als Text und einem Datum-Objekt.
- Berechnung des Alters in Jahren unter Berücksichtigung der Schaltjahre mit Schalttagen.
- Betroffene Felder anhand ihrer Feld-ID ansprechen.
- Ein Listbox-Feld unsichtbar machen.
- Setzen von Optionen eines Listbox-Feldes.
- Abwahl der aktuellen Option eines Listbox-Feldes.
Beschreibung
Der Benutzer wählt ein Geburtsdatum aus. Ja nachdem, ob das sich dadurch ergebende Alter eine Volljährigkeit bedeutet oder nicht, werden unterschiedliche weitere Felder angezeigt. Ist kein Datum ausgewählt, so sind keine zusätzlichen Felder zu sehen. Die jeweils zusätzlichen Felder für Volljährigkeit und Minderjährigkeit sind alles Bedingte Felder.
Die Anzeige dieser Bedingten Felder wird durch die Auswahl in einem später unsichtbaren Steuer-Feld vom Typ Listbox gesteuert:
- Bei keiner Auswahl werden keine zusätzlichen Felder angezeigt.
- Bei Auswahl der Option 0 mit Wert 0 werden die Felder zur Minderjährigkeit angezeigt.
- Bei Auswahl der Option 1 mit Wert 1 werden die Felder zur Volljährigkeit angezeigt.
Die Auswahl des unsichtbaren Steuer-Feldes vom Typ Listbox wird durch den JavaScript-Code durchgeführt. Der JavaScript-Code berechnet das Alter anhand des gewählten Geburtsdatums und setzt die entsprechende Option des Steuer-Feldes. Ist kein Geburtsdatum gesetzt oder wird es durch den Benutzer zurückgesetzt, so wird die Steuer-Listbox auf keine Auswahl gesetzt.
Es können beliebig viele Bedingte Felder mit dieser Logik (Volljährigkeit oder Minderjährigkeit oder keine Angabe) angezeigt und ausgeblendet werden.
Die Formular-Felder
Das Formular hat folgende 4 Felder:
- birth-date: Feld vom Typ Datum: Auswahl des Geburtsdatums.
- select-helper’: Feld vom Typ Listbox:
Listbox als Steuer-Feld mit den 3 Zuständen:- Nichts ausgewählt.
- 0 ausgewählt.
- 1 ausgewählt.
- text-minor: Feld vom Typ Text:
Texteingabe für den Fall ‘minderjährig’. Bedingtes Feld, erscheint nur für Listbox = 0. - text-adult: Feld vom Typ Text:
Texteingabe für den Fall ‘Erwachsener’. Bedingtes Feld, erscheint nur für Listbox = 1.
Das Formular
Das Formular ohne Konfiguration und ohne eigenen JavaScript-Code
Das Formular mit Konfiguration aber ohne eigenen JavaScript-Code
Das Steuer-Feld ist noch sichtbar. Die Optionen im Steuer-Feld werden noch manuell ausgewählt. Später führt der JavaScript-Code führt die Auswahl der Optionen anhand des gewählten Geburtsdatums automatisch durch.
Kein Wert im Steuer-Feld ausgewählt.
Weder Feld text-minor noch Feld text-adult sind sichtbar.
Wert 0 im Steuer-Feld ausgewählt.
Das Feld text-minor ist sichtbar.
Wert 1 im Steuer-Feld ausgewählt.
Das Feld text-adult ist sichtbar.
Das Formular mit eigenem JavaScript-Code
Das Steuer-Feld wird durch den JavaScript-Code versteckt. Der JavaScript-Code führt die Auswahl der Optionen im Steuer-Feld anhand des gewählten Geburtsdatums automatisch durch.
Kein Geburtsdatum ausgewählt.
Weder Feld text-minor noch Feld text-adult sind sichtbar.
Ein junges Geburtsdatum ausgewählt.
Das Feld text-minor ist sichtbar.
Ein älteres Geburtsdatum ausgewählt.
Das Feld text-adult ist sichtbar.
Die Formular-Konfiguration
Der JavaScript-Code wird in der Formular-Konfiguration, Reiter Frontend Webassets auf dem Unter-Reiter Formular in das Options-Feld JavaScript eingetragen:
- Formular-Konfiguration » Reiter: Frontend Webassets » Unter-Reiter Formular
Parameter: JavaScript = Der JavaScript-Code.
Der JavaScript-Code
// console.log('FEWA script loaded');
document.addEventListener('visformsInitialised', () => {
// console.log('visformsInitialised')
const dateFieldID = '103'; // Visforms date field ID of field list
const selectFieldID = '104'; // Visforms select field ID of field list
const dateField = document.getElementById(`field${dateFieldID}`);
const selectFieldContainer = document.querySelector(`div.field${selectFieldID}`);
const selectField = document.getElementById(`field${selectFieldID}`);
const options = selectField.options;
const count = options.length;
selectFieldContainer.classList.add('visinvisible');
dateField.addEventListener('change', (e) => {
let value = e.target.value;
if('' === value) {
for (let i = 0; i < count; i++) {
selectField.options[i].selected = false;
}
selectField.dispatchEvent(new Event('change'));
return;
}
let verify = 18;
let reached = minage(value, null, {minage : verify});
if(reached) {
selectField.value = 1;
}
else {
selectField.value = 0;
}
selectField.dispatchEvent(new Event('change'));
})
});
function minage(value, element, options) {
let check = false, minage = "", age = "", format, i = 0, fmt = {}, valueParts, years, now = new Date();
// a date is selected
if (value) {
// no minage set
if (options.minage) {
minage = options.minage;
} else {
return true;
}
// get year, month and day from selected date in the currently used format
format = (value.indexOf(".") > -1) ? "dd.mm.yyyy" : ((value.indexOf("/") > -1) ? "mm/dd/yyyy" : "yyyy-mm-dd");
format.replace(/(yyyy|dd|mm)/g, function (part) {
fmt[part] = i++;
});
valueParts = value.match(/(\d+)/g);
value = new Date(valueParts[fmt["yyyy"]], valueParts[fmt["mm"]] - 1, valueParts[fmt["dd"]], 0, 0, 0, 0);
// get the difference between the year of now and the selected date
years = now.getFullYear() - value.getFullYear();
// set year in selected date to current year
value.setFullYear(value.getFullYear() + years);
// if the selected date is then in the future, subtract 1 from years, because the last year is not yet completed
if (value > now) {
years--;
}
check = years >= minage;
return check;
}
}
Folgende Anpassungen an Ihre Situation sind notwendig:
- const dateFieldID = ‘103' Die Visforms Datums-Feld-ID aus der Feldliste.
- const selectFieldID = ‘104' Die Visforms Listbox-Feld-ID aus der Feldliste (Steuer-Feld).
- let verify = 18 Das Alter auf das geprüft werden soll.
Im Falle von Volljährigkeit oder Minderjährigkeit ist keine Änderung notwendig.
Die Funktion ‘minage()’ ist eine direkte Kopie aus dem Visforms-Code zur Validierung. Diese Funktion ist ab der Visforms Version 5.1.0 im Code von Visforms enthalten.
Der obige JavaScript-Code
- Versteckt die Listbox select-helper.
- Steuert die Listbox select-helper entsprechend der Angabe des Datums in Feld birth-date.
Reset-Button mit Abfrage
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Code erst dann ablaufen lassen, nachdem das Formular seitens Visforms initialisiert wurde.
- Auf Button-Klick durch den Benutzer reagieren.
- Betroffene Felder anhand ihrer Feld-ID ansprechen.
- Dem Reset-Button einen zusätzlichen OnClick-Button-Handler hinzufügen.
- Den zusätzlichen OnClick-Button-Handler an die erste Position innerhalb der OnClick-Button-Handler-Liste des Reset-Buttons setzen.
- Den Benutzer durch eine Abfrage mittels Ja-Nein-Dialog entscheiden lassen.
- Auf die Ja-Nein-Entscheidung des Benutzers reagieren.
- Die Ausführung aller anderen OnClick-Button-Handler des Reset-Buttons unterbinden.
Beschreibung
Es ist möglich dem Formular einen Reset-Button hinzuzufügen. Dem Formular wird ein Reset-Button hinzugefügt, indem das Formular ein Feld mit Feld-Typ Reset Button erhält. Ein Feld mit Feld-Typ Reset Button wird im Formular automatisch an die richtige Stelle platziert, zusammen mit den anderen Buttons des Formulars. Ein Feld mit Feld-Typ Reset Button erhält seine Aufschrift aus der Angabe seines Feld-Labels.
Durch Klick auf den Reset-Button werden alle bisherigen Eingaben gelöscht. Zwischen dem Klick auf den Reset-Button und dem Löschen aller bisherigen Eingaben soll eine zusätzliche Abfrage erfolgen. Die zusätzliche Abfrage stellt sicher, dass der Benutzer seine gemachten Eingaben nicht aus Versehen löscht.
Das Formular
Der Benutzer hat Eingaben in den Feldern First Name und Last Name gemacht. Anschließend klickt der Benutzer bewusst oder aus Versehen auf den Button Reset.
Nach Klick auf den Button Reset erhält der Benutzer die Möglichkeit, das Reset seiner Angaben zu verhindern. Nach Klick auf den Button Abbrechen erscheint das Formular ohne Änderungen an den bereits gemachten Angaben. Nach Klick auf den Button OK werden alle bisherigen Angaben gelöscht und es erscheint das leere Formular.
Der JavaScript-Code
Der JavaScript-Code verwendet für dieses Beispiel die verbreitetet JavaScript-Bibliothek jQuery aus dem folgenden Grund.
Um das gleiche Verhalten mit reinem JavaScript zu erreichen, gibt es eine wichtige Einschränkung:
Standard-JavaScript bietet keinen direkten Zugriff auf eine Liste der registrierten Event-Listener.
jQuery erreicht das über seine eigene interne _data() Funktionalität.
Um dieses Problem zu lösen, muss die native Methode addEventListener erweitert werden (patchen), um die registrierten Funktionen in einem eigenen Array mitzuverfolgen.
Diese Lösung in reinem JavaScript ist für dieses Beispiel unverhältnismäßig aufwendig.
Außerdem gibt es keine Garantie dafür, dass nicht gleichzeitig anderer JavaScript-Code existiert, der die Events ursprünglich registriert.
In dem Fall müssten darüber hinaus alternative Ansätze wie Event-Capturing oder das Klonen des Elements eingesetzt werden.
Hinweis: Es sind in der Regel für diesen Beispiel-Code keine Anpassungen an Ihre Situation notwendig. Der Reset-Button wird anhand seines Input-Types unabhängig von seiner Feld-ID erkannt.
// console.log('FEWA script loaded');
document.addEventListener('visformsInitialised', () => {
// console.log('visformsInitialised')
// timeout: make sure all foreign event listener handlers are attached
window.setTimeout(function () {
// button click handler has to be at the top of click event listener list to get called first
// add own event handler as last in the event listener list
const button = jQuery("input[id^='field'][type='reset']");
button.on('click', function(event) {
if (!confirm('Clear all inputs?')) {
event.stopImmediatePropagation();
return false;
}
});
// move own event handler from last in list to top of the list
let eventList = jQuery._data(button[0], "events");
eventList.click.unshift(eventList.click.pop());
}, 500);
});