JavaScript Academy · Lektion

Clientseitige Validierung

Validieren Sie Eingaben, bevor Sie sie irgendwohin senden.

Clientseitige Validierung ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum clientseitig validieren

Clientseitige Validierung liefert sofortiges Feedback und sorgt für eine angenehmere Nutzung. Bedenken Sie, dass sie nur eine Komfortfunktion und kein Sicherheitsmechanismus ist: Validieren Sie immer auch auf dem Server.

Beim Absenden validieren

Ein häufig verwendetes Muster prüft die Felder beim Absenden des Formulars und bricht das Absenden ab, wenn etwas ungültig ist.

form.addEventListener("submit", (e) => {
  if (!isValid()) {
    e.preventDefault();
  }
});

Ein Pflichtfeld prüfen

Entfernen Sie führende und nachfolgende Leerzeichen aus dem Wert und lehnen Sie leere Eingaben ab. So werden keine Zeichenfolgen akzeptiert, die nur aus Leerzeichen bestehen.

function checkName() {
  const v = nameInput.value.trim();
  return v.length > 0;
}

Längenregeln

Vergleichen Sie die bereinigte Länge mit den Mindest- und Höchstgrenzen für Felder wie Passwörter.

function checkPassword() {
  const v = passwordInput.value;
  return v.length >= 8 && v.length <= 64;
}

Musterabgleich

Reguläre Ausdrücke prüfen Formate wie E-Mail-Adressen. Halten Sie die Muster einfach und kombinieren Sie sie mit Prüfungen auf dem Server.

function checkEmail() {
  const v = emailInput.value.trim();
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}

Fehlermeldungen anzeigen

Zeigen Sie das Feedback in der Nähe des Feldes über ein eigenes Fehler-Element an und verwenden Sie textContent, um vor XSS geschützt zu bleiben.

function showError(field, msg) {
  const err = field.nextElementSibling;
  err.textContent = msg;
}

Fehler löschen

Setzen Sie die Meldung zurück, sobald das Feld gültig ist, damit alte Fehler nicht bestehen bleiben.

function clearError(field) {
  field.nextElementSibling.textContent = "";
}

Live-Validierung

Validieren Sie beim input- oder blur-Ereignis, um beim Tippen oder beim Verlassen eines Feldes sofortiges Feedback zu geben.

emailInput.addEventListener("blur", () => {
  if (!checkEmail()) showError(emailInput, "Invalid email");
  else clearError(emailInput);
});

Barrierefreiheit mit aria-invalid

Setzen Sie aria-invalid und verknüpfen Sie Fehler mit aria-describedby, damit assistive Technologien die Probleme ankündigen.

emailInput.setAttribute("aria-invalid", "true");

Den ersten Fehler fokussieren

Setzen Sie den Fokus nach einem fehlgeschlagenen Absendeversuch auf das erste ungültige Feld, damit Benutzerinnen und Benutzer den Fehler sofort beheben können.

function focusFirstError(fields) {
  const bad = fields.find((f) => !f.valid);
  if (bad) bad.el.focus();
}

Auch serverseitig validieren

Die clientseitige Validierung kann durch das Deaktivieren von JavaScript oder durch das Erstellen eigener Anfragen umgangen werden. Betrachten Sie den Server als maßgebliche Quelle.

Kurztest

Sicherheitsbewusstsein.

Zusammenfassung

Bei der manuellen Validierung werden Felder auf Pflichtangaben, Länge und Muster geprüft. Bei einem Fehler wird das Absenden mit preventDefault abgebrochen. Zeigen und löschen Sie Meldungen sicher mit textContent, validieren Sie live bei input/blur, verbessern Sie die Barrierefreiheit mit aria-invalid und setzen Sie den Fokus auf den ersten Fehler. Validieren Sie immer erneut auf dem Server.

Häufig gestellte Fragen

Ist die Lektion „Clientseitige Validierung“ kostenlos?

Ja — der vollständige Text von „Clientseitige Validierung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Clientseitige Validierung“?

Validieren Sie Eingaben, bevor Sie sie irgendwohin senden. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Clientseitige Validierung“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy