add custom validation messages and bot prevention logic

assets/js/bestellformular.js

@@ -1,61 +1,79 @@
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener('DOMContentLoaded', function () {
-    console.log('bestellformular.js loaded');
+  console.log('bestellformular.js loaded')
   // Rest of the code goes here
-    const FORMDEBUG = false;
+  const FORMDEBUG = false
-    const btn = document.getElementById('bestellformular-btn');
+  const btn = document.getElementById('bestellformular-btn')
-    const bestellformular = document.getElementById('bestellformular');
+  const bestellformular = document.getElementById('bestellformular')
+
+  // custom Validation messages
+  const messagesGerman = {
+    required: 'Bitte füllen Sie dieses Feld aus',
+    email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein',
+    minlength: 'Bitte geben Sie mindestens {0} Zeichen ein',
+    maxlength: 'Bitte geben Sie maximal {0} Zeichen ein',
+    min: 'Bitte geben Sie mindestens {0} ein',
+    max: 'Bitte geben Sie maximal {0} ein',
+    range: 'Bitte geben Sie zwischen {0} und {1} ein',
+  }
+  const messagesFrench = {
+    required: 'Veuillez remplir ce champ',
+    email: 'Veuillez saisir une adresse email valide',
+    minlength: 'Veuillez saisir au moins {0} caractères',
+    maxlength: 'Veuillez saisir au plus {0} caractères',
+    min: 'Veuillez saisir au moins {0} caractères',
+    max: 'Veuillez saisir au plus {0} caractères',
+    range: 'Veuillez saisir au moins {0} et au plus {1} caractères',
+  }
+  
   // initieiere Zeitmessung zur Botprevention
-    var startTime = Date.now();
+  var startTime = Date.now()
 
   // Messe ob mit der Seite agiert wird
-    var userInteracted = false;
+  var userInteracted = false
 
   function setUserInteracted() {
-        var timeSpent = (Date.now() - startTime) / 1000; // Zeit in Sekunden
+    var timeSpent = (Date.now() - startTime) / 1000 // Zeit in Sekunden
     if (timeSpent > 5) {
-            btn.disabled = false;
+      btn.disabled = false
     }
-        userInteracted = true;
+    userInteracted = true
   }
   setTimeout(function () {
     if (userInteracted) {
-            btn.disabled = false;
+      btn.disabled = false
     }
-    }, 5000);
+  }, 5000)
   // Eventlistener für Interaktionen - setzt userInteracted auf true bei Interaktion
-    document.addEventListener("mousedown", setUserInteracted);
+  document.addEventListener('mousedown', setUserInteracted)
-    document.addEventListener("touchstart", setUserInteracted);
+  document.addEventListener('touchstart', setUserInteracted)
-    document.addEventListener("keydown", setUserInteracted);
+  document.addEventListener('keydown', setUserInteracted)
 
   bestellformular.addEventListener('submit', function (e) {
+    e.preventDefault()
 
-        e.preventDefault(); 
+    const form = e.target
-
+    const notification = document.getElementById('notification')
-        const form = e.target;
+    const zsrTooltip = document.getElementById('zsr-tooltip')
-        const notification = document.getElementById('notification');
-        const zsrTooltip = document.getElementById('zsr-tooltip');
 
     // Spinner und button disabled anzeigen
 
-        
+    var endTime = Date.now()
-        
+    var timeSpent = (endTime - startTime) / 1000 // Zeit in Sekunden
-        var endTime = Date.now();
-        var timeSpent = (endTime - startTime) / 1000; // Zeit in Sekunden
 
     // Setze die Werte für die Botvalidierung zum Auswerten in PHP
-        document.getElementById("age").value = timeSpent;
+    document.getElementById('age').value = timeSpent
-        document.getElementById("hobbies").value = userInteracted ? "true" : "false";
+    document.getElementById('hobbies').value = userInteracted ? 'true' : 'false'
 
     // Validierung der ZSR-Nummer
-        const zsrNummer = form.elements['zsr_nummer'].value;
+    const zsrNummer = form.elements['zsr_nummer'].value
-        const isNumberOrBeantragt = /^\d+$|^beantragt$/i.test(zsrNummer);
+    const isNumberOrBeantragt = /^\d+$|^beantragt$/i.test(zsrNummer)
     // TODO REGEX für ZSR-Nummer
     if (!isNumberOrBeantragt) {
       // Display error message for invalid zsr_nummer
-            zsrTooltip.className = 'input-tooltip';
+      zsrTooltip.className = 'input-tooltip'
       // Scroll to the tooltip element
-            zsrTooltip.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+      zsrTooltip.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'nearest'})
-            return;
+      return
     }
 
     btn.innerHTML = ` 
@@ -71,18 +89,18 @@ document.addEventListener("DOMContentLoaded", function() {
         </svg>
         `
 
-        btn.disabled = true;
+    btn.disabled = true
 
     if (FORMDEBUG) {
-            console.log("userInteracted: " + userInteracted);
+      console.log('userInteracted: ' + userInteracted)
-            console.log("timeSpent: " + timeSpent);
+      console.log('timeSpent: ' + timeSpent)
-            console.log("hobbies: " + document.getElementById("hobbies").value);
+      console.log('hobbies: ' + document.getElementById('hobbies').value)
-            console.log("age: " + document.getElementById("age").value);
+      console.log('age: ' + document.getElementById('age').value)
-            console.log("verify_email(honeypot): " + document.getElementById("verify_email").value);
+      console.log('verify_email(honeypot): ' + document.getElementById('verify_email').value)
     }
 
     // Formulardaten an den Server senden
-        const data = new FormData(form);
+    const data = new FormData(form)
     fetch(form.action, {
       method: 'POST',
       mode: 'cors',
@@ -90,32 +108,32 @@ document.addEventListener("DOMContentLoaded", function() {
     })
       .then(response => {
         if (!response.ok) {
-                    throw new Error('Network response was not ok');
+          throw new Error('Network response was not ok')
         }
-                return response.json();
+        return response.json()
       })
       .then(data => {
         // Erfolgsnachricht anzeigen
         // TODO Nachricht anpassen wenn französische Version
-                notification.textContent = 'Bestellformular erfolgreich gesendet!';
+        notification.textContent = 'Bestellformular erfolgreich gesendet!'
-                btn.className = 'submitbutton text-white mx-auto submit-after-valid-captchaaaa fadeOut';
+        btn.className = 'submitbutton text-white mx-auto submit-after-valid-captchaaaa fadeOut'
         setTimeout(() => {
-                    btn.style.visibility = 'hidden';
+          btn.style.visibility = 'hidden'
-                    btn.style.display = 'none';
+          btn.style.display = 'none'
-                    notification.style.visibility = 'visible';
+          notification.style.visibility = 'visible'
-                    notification.style.display = 'block';
+          notification.style.display = 'block'
-                    notification.classList.remove('fadeIn'); // Remove fadeIn class
+          notification.classList.remove('fadeIn') // Remove fadeIn class
-                    void notification.offsetWidth; 
+          void notification.offsetWidth
-                    notification.className = 'bg-green-500 text-white px-4 py-2 rounded block fadeIn';
+          notification.className = 'bg-green-500 text-white px-4 py-2 rounded block fadeIn'
-                }, 1000);
+        }, 1000)
         // setTimeout(() => notification.className = 'bg-green-500 text-white px-4 py-2 rounded hidden', 5000); // Benachrichtigung nach 5 Sekunden ausblenden
       })
-            .catch((error) => {
+      .catch(error => {
         // Fehlermeldung anzeigen
-                notification.textContent = 'Fehler beim Senden der Nachricht.';
+        notification.textContent = 'Fehler beim Senden der Nachricht.'
-                console.log(error);
+        console.log(error)
-                notification.className = 'bg-red-500 text-white px-4 py-2 rounded block';
+        notification.className = 'bg-red-500 text-white px-4 py-2 rounded block'
         // setTimeout(() => notification.className = 'bg-red-500 text-white px-4 py-2 rounded hidden', 5000); // Benachrichtigung nach 5 Sekunden ausblenden
-            });
+      })
-    });
+  })
 })