added translations for form validation tooltips
All checks were successful
Build and Deploy Hugo Site / buildAndDeploy (push) Successful in 51s
All checks were successful
Build and Deploy Hugo Site / buildAndDeploy (push) Successful in 51s
This commit is contained in:
parent
9e6183d8a8
commit
1bfa2553c7
2 changed files with 116 additions and 57 deletions
|
|
@ -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()
|
||||
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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("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 = `
|
||||
<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("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
|
||||
});
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue