Hallo Roland,
hier ein komplettes lauffähiges Beispiel mit deiner Anforderung.
Das Formular hat folgende 4 Felder.
1 - 'birth-date': Feld vom Typ 'Datum':
Auswahl des Geburtsdatums.
2 - 'listbox-age': Feld vom Typ 'Listbox':
Listbox mit den 3 Zuständen:
- Nichts ausgewählt.
- '0' ausgewählt.
- '1' ausgewählt.
3a - 'text-minor': Feld vom Typ 'Text':
Texteingabe für den Fall 'Jugendlicher'.
Bedingtes Feld, erscheint nur für Listbox = '0'.
3b - 'text-adult': Feld vom Typ 'Text':
Texteingabe für den Fall 'Erwachsener'.
Bedingtes Feld, erscheint nur für Listbox = '1'.
Das Formular ohne das FEWA JavaScript.
vi-solutions.de/forum-uploads/age-verifi...orm_no-selection.png
vi-solutions.de/forum-uploads/age-verifi...form_0-selection.png
vi-solutions.de/forum-uploads/age-verifi...form_1-selection.png
Das Formular mit dem FEWA JavaScript.
vi-solutions.de/forum-uploads/age-verifi...rm_no-birth-date.png
vi-solutions.de/forum-uploads/age-verifi...minor-birth-date.png
vi-solutions.de/forum-uploads/age-verifi...adult-birth-date.png
Die Formular-Konfiguration, Reiter 'Frontend Webassets' JavaScript mit dem JavaScript (Unter-Reiter 'Form').
vi-solutions.de/forum-uploads/age-verifi...nfiguration_FEWA.png
Das Formular hat folgenden JavaScript Code.
Code:
const dateFieldID = '640'; // Visforms date field ID of field list
const selectFieldID = '641'; // Visforms select field ID of field list
jQuery(document).ready(function() {
console.log('FEWA script loaded');
jQuery('.visform').bind('visformsInitialised', function() {
// start after form is initialized
console.log('visformsInitialised');
// hide listbox-age control group
jQuery(`div.field${selectFieldID}`).css('display', 'none');
jQuery(`#field${dateFieldID}`).on('change', function() {
let value = jQuery(this).val();
// no date selected: deselect listbox and quitt
if('' === value) {
console.log('no date selected');
jQuery(`#field${selectFieldID} option`).prop('selected', false);
jQuery(`#field${selectFieldID}`).trigger("change");
return;
}
// date selected: verify the age
let verify = 18;
let reached = minage(value, null, {minage : verify});
console.log(value + ` - reached ${verify}: ` + reached);
if(reached) {
jQuery(`#field${selectFieldID}`).val(1);
}
else {
jQuery(`#field${selectFieldID}`).val(0);
}
jQuery(`#field${selectFieldID}`).trigger("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
// with regards to 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;
}
}
Die Funktion 'minage' ist eine direkte Kopie aus dem Visforms-Code zur Validierung.
Enthalten ab der Visforms Version 5.1.0.
Der obige JavaScript-Code
- versteckt die Listbox 'listbox-age'
- steuert die Listbox 'listbox-age' entsprechend der Angabe des Datums in Feld 'birth-date'
Anpassung an dein Formular.
const dateFieldID = '640'; --> Hier die Feld ID für dein Datums-Feld eintragen.
const selectFieldID = '641'; --> Hier die Feld ID für dein Listbox-Feld eintragen.
let verify = 18; --> Hier das Mindest-Alter festlegen (für den Fall Jugendlicher/Erwachsener ist keine Änderung notwendig).
Erweiterungen an deinem Formular.
Analog zu den Feldern 'text-minor' und 'text-adult' kannst du weitere Felder zu 'Bedingten Feldern' machen.
Damit folgen auch alle weiteren bedingten Felder der Anzeige-Logik entsprechend des gewählten Geburtsdatums.
Liebe Grüße, Ingmar