added translations for form validation tooltips

assets/js/bestellformular.js

@@ -25,6 +25,27 @@ document.addEventListener('DOMContentLoaded', function () {
     range: 'Veuillez saisir au moins {0} et au plus {1} caractères',
   }
 
+  // custom Validation rules
+  // determine which language depending on html lang attribute
+  const lang = document.documentElement.lang
+  console.log('lang', lang)
+  const messages = lang === 'de-DE' ? messagesGerman : messagesFrench
+  // set custom validation messages for each validator
+  console.log('messages', messages)
+
+  let textInputs = document.querySelectorAll('input[type="text"]')
+  const emailInput = document.getElementById('email')
+
+  Array.from(textInputs).forEach(function (input) {
+    input.addEventListener('invalid', function () {
+      this.setCustomValidity(messages['required'])
+    })
+  })
+
+  emailInput.addEventListener('invalid', function () {
+    this.setCustomValidity(messages['email'])
+  })
+
   // initieiere Zeitmessung zur Botprevention
   var startTime = Date.now()
 
@@ -72,7 +93,7 @@ document.addEventListener('DOMContentLoaded', function () {
       // Display error message for invalid zsr_nummer
       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
     }
 
@@ -106,13 +127,13 @@ document.addEventListener('DOMContentLoaded', function () {
       mode: 'cors',
       body: data,
     })
-      .then(response => {
+      .then((response) => {
         if (!response.ok) {
           throw new Error('Network response was not ok')
         }
         return response.json()
       })
-      .then(data => {
+      .then((data) => {
         // Erfolgsnachricht anzeigen
         // TODO Nachricht anpassen wenn französische Version
         notification.textContent = 'Bestellformular erfolgreich gesendet!'
@@ -128,7 +149,7 @@ document.addEventListener('DOMContentLoaded', function () {
         }, 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.'
         console.log(error)

assets/js/kontaktformular.js

@@ -1,49 +1,88 @@
 window.onload = function () {
+  const FORMDEBUG = false
+  const btn = document.getElementById('kontaktformular-btn')
+  const kontaktformular = document.getElementById('kontaktformular')
+
+  // 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',
+  }
+
+  // custom Validation rules
+  // determine which language depending on html lang attribute
+  const lang = document.documentElement.lang
+  console.log('lang', lang)
+  const messages = lang === 'de-DE' ? messagesGerman : messagesFrench
+  // set custom validation messages for each validator
+  console.log('messages', messages)
+
+  let textInputs = document.querySelectorAll('input[type="text"]')
+  const emailInput = document.getElementById('email')
+
+  Array.from(textInputs).forEach(function (input) {
+    input.addEventListener('invalid', function () {
+      this.setCustomValidity(messages['required'])
+    })
+  })
+
+  emailInput.addEventListener('invalid', function () {
+    this.setCustomValidity(messages['email'])
+  })
+
   
-  const FORMDEBUG = false;
-  const btn = document.getElementById('kontaktformular-btn');
-  const kontaktformular = document.getElementById('kontaktformular');
   // 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)
 
   kontaktformular.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'
 
     btn.innerHTML = ` 
         <svg class="text-gray-300 animate-spin mx-auto" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"
@@ -58,19 +97,19 @@ window.onload = 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)
     }
 
     // Konvertiere das JSON-Objekt in einen String, um es zu senden
-    const formData = new FormData(form);
+    const formData = new FormData(form)
-    const formDataEncoded = new URLSearchParams(formData).toString();
+    const formDataEncoded = new URLSearchParams(formData).toString()
     const formURL = form.action + '.json'
 
     fetch(formURL, {
@@ -80,35 +119,34 @@ window.onload = function () {
       },
       body: formDataEncoded,
     })
-      .then(response => {
+      .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 => {
+      .then((data) => {
         // Erfolgsnachricht anzeigen
         // TODO Nachricht anpassen wenn französische Version
-        notification.textContent = 'Anfrage erfolgreich versendet.';
+        notification.textContent = 'Anfrage erfolgreich versendet.'
-        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) => {
         // 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
-      });
+      })
   })
-  
 }