diff --git a/assets/js/bestellformular.js b/assets/js/bestellformular.js index 09e1879..973810b 100644 --- a/assets/js/bestellformular.js +++ b/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) diff --git a/assets/js/kontaktformular.js b/assets/js/kontaktformular.js index 8a8e2fc..5176287 100644 --- a/assets/js/kontaktformular.js +++ b/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') - 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']) + }) + + // 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("touchstart", setUserInteracted); - document.addEventListener("keydown", setUserInteracted); + document.addEventListener('mousedown', setUserInteracted) + document.addEventListener('touchstart', setUserInteracted) + document.addEventListener('keydown', setUserInteracted) kontaktformular.addEventListener('submit', function (e) { + e.preventDefault() - e.preventDefault(); - - const form = e.target; - const notification = document.getElementById('notification'); - const zsrTooltip = document.getElementById('zsr-tooltip'); + const form = e.target + 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("hobbies").value = userInteracted ? "true" : "false"; + document.getElementById('age').value = timeSpent + document.getElementById('hobbies').value = userInteracted ? 'true' : 'false' btn.innerHTML = ` ` - btn.disabled = true; + btn.disabled = true 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); + 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) } // Konvertiere das JSON-Objekt in einen String, um es zu senden - const formData = new FormData(form); - const formDataEncoded = new URLSearchParams(formData).toString(); + const formData = new FormData(form) + 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.'; - btn.className = 'submitbutton text-white mx-auto submit-after-valid-captchaaaa fadeOut'; + notification.textContent = 'Anfrage erfolgreich versendet.' + btn.className = 'submitbutton text-white mx-auto submit-after-valid-captchaaaa fadeOut' setTimeout(() => { - btn.style.visibility = 'hidden'; - btn.style.display = 'none'; - notification.style.visibility = 'visible'; - notification.style.display = 'block'; - notification.classList.remove('fadeIn'); // Remove fadeIn class - void notification.offsetWidth; - notification.className = 'bg-green-500 text-white px-4 py-2 rounded block fadeIn'; - }, 1000); + btn.style.visibility = 'hidden' + btn.style.display = 'none' + notification.style.visibility = 'visible' + notification.style.display = 'block' + notification.classList.remove('fadeIn') // Remove fadeIn class + void notification.offsetWidth + notification.className = 'bg-green-500 text-white px-4 py-2 rounded block fadeIn' + }, 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.'; - console.log(error); - notification.className = 'bg-red-500 text-white px-4 py-2 rounded block'; + notification.textContent = 'Fehler beim Senden der Nachricht.' + console.log(error) + 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 - }); + }) }) - -} \ No newline at end of file +}