100 lines
3.0 KiB
JavaScript
100 lines
3.0 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
const form = document.querySelector("form");
|
|
|
|
if (!form) {
|
|
console.error("Kontaktformular wurde nicht gefunden.");
|
|
return;
|
|
}
|
|
|
|
const nameInput = form.querySelector('input[name="name"]');
|
|
const emailInput = form.querySelector('input[name="email"]');
|
|
const inquiryTypeSelect = form.querySelector('select[name="inquiryType"]');
|
|
const subjectInput = form.querySelector('input[name="subject"]');
|
|
const messageInput = form.querySelector('textarea[name="message"]');
|
|
const submitButton = form.querySelector('button[type="submit"]');
|
|
|
|
const MIN_MESSAGE_LENGTH = 10;
|
|
|
|
// Container der Nachricht
|
|
const messageContainer = messageInput?.closest("div");
|
|
|
|
// Hinweis "Nachricht ist lang genug"
|
|
const messageValidElement =
|
|
messageContainer?.querySelector(".message-valid");
|
|
|
|
if (
|
|
!nameInput ||
|
|
!emailInput ||
|
|
!inquiryTypeSelect ||
|
|
!subjectInput ||
|
|
!messageInput ||
|
|
!submitButton
|
|
) {
|
|
console.error("Ein oder mehrere Formularfelder wurden nicht gefunden.");
|
|
return;
|
|
}
|
|
|
|
function validateForm() {
|
|
const name = nameInput.value.trim();
|
|
const email = emailInput.value.trim();
|
|
const inquiryType = inquiryTypeSelect.value.trim();
|
|
const subject = subjectInput.value.trim();
|
|
const message = messageInput.value.trim();
|
|
|
|
// E-Mail-Adresse prüfen
|
|
const emailIsValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
|
|
|
// Nachricht auf Mindestlänge prüfen
|
|
const messageIsLongEnough = message.length >= MIN_MESSAGE_LENGTH;
|
|
|
|
// Gesamtes Formular prüfen
|
|
const formIsValid =
|
|
name.length > 0 &&
|
|
emailIsValid &&
|
|
inquiryType.length > 0 &&
|
|
subject.length > 0 &&
|
|
messageIsLongEnough;
|
|
|
|
// Button aktivieren/deaktivieren
|
|
submitButton.disabled = !formIsValid;
|
|
|
|
// Nachrichten-Zähler aktualisieren
|
|
const messageLabel = messageContainer?.querySelector("label");
|
|
|
|
if (messageLabel) {
|
|
messageLabel.textContent = `Nachricht * (${message.length}/${MIN_MESSAGE_LENGTH} Min.)`;
|
|
}
|
|
|
|
// "Nachricht ist lang genug" anzeigen/verstecken
|
|
if (messageValidElement) {
|
|
messageValidElement.style.display = messageIsLongEnough
|
|
? "block"
|
|
: "none";
|
|
}
|
|
}
|
|
|
|
// Alle relevanten Felder überwachen
|
|
[
|
|
nameInput,
|
|
emailInput,
|
|
inquiryTypeSelect,
|
|
subjectInput,
|
|
messageInput,
|
|
].forEach((field) => {
|
|
field.addEventListener("input", validateForm);
|
|
field.addEventListener("change", validateForm);
|
|
});
|
|
|
|
// Formular-Submit zusätzlich absichern
|
|
form.addEventListener("submit", (event) => {
|
|
validateForm();
|
|
|
|
if (submitButton.disabled) {
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
// Initialen Zustand setzen
|
|
validateForm();
|
|
});
|