added translations for form validation tooltips

assets/js/bestellformular.js

@@ -24,7 +24,28 @@ document.addEventListener('DOMContentLoaded', function () {
     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'])
+  })
+
   // 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)