JavaScript Academy · Lektion

Die Constraint Validation API

Verwenden Sie die integrierte Gültigkeitsprüfung.

Die Constraint Validation API ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Integrierte Validierung

HTML-Formularfelder unterstützen Attribute wie required, min, max, pattern und type="email". Mit der Constraint Validation API kann JavaScript diese integrierte Validierung prüfen und steuern.

checkValidity

checkValidity gibt einen booleschen Wert zurück und löst bei jedem fehlerhaften Steuerelement ein invalid-Ereignis aus, ohne die Hinweisblase des Browsers anzuzeigen.

const email = document.querySelector("#email");
console.log(email.checkValidity());

reportValidity

reportValidity funktioniert wie checkValidity, zeigt aber zusätzlich die Benutzeroberfläche mit der Validierungsmeldung des Browsers für ungültige Felder an.

if (!form.reportValidity()) {
  console.log("show built-in errors");
}

Das validity-Objekt

Jedes Steuerelement besitzt ein validity-Objekt mit booleschen Flags, die genau beschreiben, was nicht stimmt.

console.log(email.validity.valueMissing);  // empty required
console.log(email.validity.typeMismatch);  // wrong format
console.log(email.validity.tooShort);

validity.valid

validity.valid ist nur dann true, wenn das Feld alle Einschränkungen erfüllt, und fasst damit die anderen Flags zusammen.

if (email.validity.valid) {
  console.log("ok");
}

validationMessage

validationMessage enthält die lokalisierte Meldung, die der Browser für den aktuellen Fehler anzeigen würde.

console.log(email.validationMessage);

setCustomValidity

setCustomValidity markiert ein Feld mit Ihrer eigenen Meldung als ungültig. Eine nicht leere Zeichenkette bedeutet ungültig; eine leere Zeichenkette hebt die Markierung auf.

function checkMatch() {
  if (pass.value !== confirm.value) {
    confirm.setCustomValidity("Passwords must match");
  } else {
    confirm.setCustomValidity("");
  }
}

Benutzerdefinierte Fehler immer löschen

Wenn Sie eine benutzerdefinierte Meldung setzen, müssen Sie sie nach erfolgreicher Validierung mit einer leeren Zeichenkette löschen. Andernfalls bleibt das Feld dauerhaft ungültig.

confirm.addEventListener("input", () => {
  confirm.setCustomValidity("");
  checkMatch();
});

Das invalid-Ereignis

Lauschen Sie auf das invalid-Ereignis, um bei einem Validierungsfehler eigene Logik auszuführen, beispielsweise ein Feld zu formatieren.

email.addEventListener("invalid", () => {
  email.classList.add("error");
});

Native Hinweisblasen deaktivieren

Fügen Sie dem Formular novalidate hinzu, um native Pop-ups zu unterdrücken und die API trotzdem für eigene Meldungen zu verwenden.

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

Formatieren mit :valid und :invalid

Die CSS-Pseudoklassen :valid und :invalid formatieren Felder automatisch entsprechend ihrem Validierungszustand.

Kurztest

Benutzerdefinierte Validierungsregel.

Zusammenfassung

Die Constraint Validation API arbeitet mit HTML-Attributen für Einschränkungen. Verwenden Sie checkValidity/reportValidity, um Fehler zu prüfen und optional anzuzeigen, untersuchen Sie die validity-Flags und validationMessage und fügen Sie mit setCustomValidity eigene Regeln hinzu (löschen Sie sie mit einer leeren Zeichenkette). Das invalid-Ereignis und die CSS-Klassen :valid/:invalid unterstützen die Formatierung.

Häufig gestellte Fragen

Ist die Lektion „Die Constraint Validation API“ kostenlos?

Ja — der vollständige Text von „Die Constraint Validation API“ 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 „Die Constraint Validation API“?

Verwenden Sie die integrierte Gültigkeitsprüfung. 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 4 von 4.

Wie lange dauert die Lektion „Die Constraint Validation API“?

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