lab-development-imb/web/10/demos/validierung/03_validierung.js

document.addEventListener("DOMContentLoaded", () => {
  const form = document.getElementById("contactForm");

  const username = document.getElementById("username");
  const email = document.getElementById("email");
  const age = document.getElementById("age");

  const usernameError = document.getElementById("usernameError");
  const emailError = document.getElementById("emailError");
  const ageError = document.getElementById("ageError");

  // --- Live-Feedback ---
  username.addEventListener("input", () => {
    const value = username.value.trim().toLowerCase();
    if (!value) {
      usernameError.textContent = "Benutzername darf nicht leer sein.";
    } else if (value === "admin") {
      usernameError.textContent = "Der Benutzername 'admin' ist nicht erlaubt.";
    } else {
      usernameError.textContent = "";
    }
  });

  email.addEventListener("input", () => {
    if (!email.validity.valid) {
      emailError.textContent = "Bitte eine gültige E-Mail-Adresse eingeben.";
    } else {
      emailError.textContent = "";
    }
  });

  age.addEventListener("input", () => {
    if (!age.validity.valid) {
      if (age.validity.valueMissing) {
        ageError.textContent = "Bitte das Alter angeben.";
      } else if (age.validity.rangeUnderflow) {
        ageError.textContent = "Du musst mindestens 18 Jahre alt sein.";
      } else if (age.validity.rangeOverflow) {
        ageError.textContent = "Das Alter darf 99 nicht überschreiten.";
      } else {
        ageError.textContent = "Ungültige Eingabe.";
      }
    } else {
      ageError.textContent = "";
    }
  });

  // --- Prüfung beim Absenden ---
  form.addEventListener("submit", (event) => {
    let valid = true;

    // Benutzername prüfen
    const value = username.value.trim().toLowerCase();
    if (!value) {
      usernameError.textContent = "Benutzername darf nicht leer sein.";
      valid = false;
    } else if (value === "admin") {
      usernameError.textContent = "Der Benutzername 'admin' ist nicht erlaubt.";
      valid = false;
    }

    // E-Mail prüfen
    if (!email.validity.valid) {
      emailError.textContent = "Bitte eine gültige E-Mail-Adresse eingeben.";
      valid = false;
    }

    // Alter prüfen
    if (!age.validity.valid) {
      ageError.textContent = "Bitte ein gültiges Alter zwischen 18 und 99 eingeben.";
      valid = false;
    }

    if (!valid) {
      event.preventDefault(); // verhindert das Absenden
    }
  });
});