From 7a9bcaaef88ae66ec36a58df6e7d31905607d304 Mon Sep 17 00:00:00 2001 From: Andreas Hnida Date: Fri, 23 Feb 2024 08:27:33 +0000 Subject: [PATCH] Formular Zusatzmodule Freiberufliche erstellt --- assets/js/bestellformular.js | 40 +++++---- assets/scss/custom.scss | 6 +- content/german/bestellung/freiberufliche.md | 2 +- .../bestellung/zusatzmodule-freiberufliche.md | 82 ++++++++++++++++++- 4 files changed, 107 insertions(+), 23 deletions(-) diff --git a/assets/js/bestellformular.js b/assets/js/bestellformular.js index 2ca231c..f907f5e 100644 --- a/assets/js/bestellformular.js +++ b/assets/js/bestellformular.js @@ -1,5 +1,7 @@ window.onload = function () { + const FORMDEBUG = false; + // initieiere Zeitmessung zur Botprevention var startTime = Date.now(); @@ -10,43 +12,49 @@ window.onload = function () { userInteracted = true; } + // Eventlistener für Interaktionen - setzt userInteracted auf true bei Interaktion document.addEventListener("mousedown", setUserInteracted); document.addEventListener("touchstart", setUserInteracted); document.addEventListener("keydown", setUserInteracted); document.getElementById('formular').addEventListener('submit', function (e) { - e.preventDefault(); // Verhindert die Standard-Formularsendung + + e.preventDefault(); - var honeyPot = document.getElementById("verify_email").value; + const form = e.target; + const data = new FormData(form); + const notification = document.getElementById('notification'); + const btn = document.getElementById('bestellformular-btn'); + const zsrTooltip = document.getElementById('zsr-tooltip'); var endTime = Date.now(); var timeSpent = (endTime - startTime) / 1000; // Zeit in Sekunden - document.getElementById("age").value = timeSpent; + // Setze die Werte für die Botvalidierung zum Auswerten in PHP + document.getElementById("age").value = timeSpent; document.getElementById("hobbies").value = userInteracted ? "true" : "false"; - const form = e.target; + // Validierung der ZSR-Nummer const zsrNummer = form.elements['zsr_nummer'].value; const isNumberOrBeantragt = /^\d+$|^beantragt$/i.test(zsrNummer); // TODO REGEX für ZSR-Nummer if (!isNumberOrBeantragt) { // Display error message for invalid zsr_nummer - const tooltip = document.getElementById('tooltip'); - tooltip.className = 'input-tooltip'; + zsrTooltip.className = 'input-tooltip'; // Scroll to the tooltip element - tooltip.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" }); + zsrTooltip.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" }); return; } - - const data = new FormData(form); - const notification = document.getElementById('notification'); - const btn = document.getElementById('bestellformular-btn'); - console.log("userInteracted: " + userInteracted); - console.log("timeSpent: " + timeSpent); - console.log("hobbies: " + document.getElementById("hobbies").value); - console.log("age: " + document.getElementById("age").value); - console.log("verify_email: " + honeyPot); + if (FORMDEBUG) { + console.log("userInteracted: " + userInteracted); + console.log("timeSpent: " + timeSpent); + console.log("hobbies: " + document.getElementById("hobbies").value); + console.log("age: " + document.getElementById("age").value); + console.log("verify_email(honeypot): " + document.getElementById("verify_email").value); + } + + // Formulardaten an den Server senden fetch(form.action, { method: 'POST', mode: 'cors', diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index 704deb6..022c900 100755 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -165,7 +165,6 @@ table .far { } #formular label { - display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; @@ -173,8 +172,7 @@ table .far { } #formular select, - #formular input, - #formular textarea { + #formular input[type="text"], #formular input[type="email"], #formular input[type="number"], #formular input[type="tel"], #formular textarea { width: 100%; padding: 0.5rem 1rem; border: 1px solid #D1D5DB; @@ -272,6 +270,8 @@ table .far { .fadeIn { @apply transition-opacity duration-1000 ease-in-out opacity-100; } + + // Honeypot- und Validierungsfelder im Bestellformular #verify_email, #age, #hobbies { display:none; } diff --git a/content/german/bestellung/freiberufliche.md b/content/german/bestellung/freiberufliche.md index 39ce2f5..9d1f894 100644 --- a/content/german/bestellung/freiberufliche.md +++ b/content/german/bestellung/freiberufliche.md @@ -70,7 +70,7 @@ title = 'Freiberufliche'
-
+
diff --git a/content/german/bestellung/zusatzmodule-freiberufliche.md b/content/german/bestellung/zusatzmodule-freiberufliche.md index b116231..b65e765 100644 --- a/content/german/bestellung/zusatzmodule-freiberufliche.md +++ b/content/german/bestellung/zusatzmodule-freiberufliche.md @@ -11,7 +11,7 @@ title = 'Zusatzmodule Freiberufliche' {{% aligncenter %}} #### Bestellformular ## VeruA ** Verwaltung und Abrechnung -### Zsatzmodule für Freiberufliche +### Zusatzmodule für Freiberufliche
--- @@ -20,9 +20,85 @@ title = 'Zusatzmodule Freiberufliche' {{% /aligncenter %}} +
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ +
+ + +
+ + +
+ + +
+ + +
+
+
+ - - +
+ + +
+