HTML Academy · Lektion

Grundlagen der Constraint Validation API

Lesen Sie den Gültigkeitsstatus und eigene Meldungen mit der Constraint Validation API aus

Grundlagen der Constraint Validation API ist eine kostenlose HTML 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 HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist die Constraint Validation API?

Die Constraint Validation API ist eine JavaScript-Schnittstelle zum Auslesen und Setzen des Validierungsstatus von Formularen:

Prüfen, ob ein Feld gültig ist
Auslesen, welche konkrete Einschränkung nicht erfüllt wurde
Individuelle Fehlermeldungen festlegen
Die Browseroberfläche für die Validierung programmgesteuert auslösen

Die validity-Eigenschaft

Jedes Formularelement verfügt über ein validity-Objekt mit bestimmten booleschen Flags:

const input = document.getElementById('email');
const v = input.validity;

console.log(v.valid);         // true if all constraints pass
console.log(v.valueMissing);  // true if required but empty
console.log(v.typeMismatch);  // true if type doesn't match (e.g. bad email)
console.log(v.patternMismatch); // true if pattern fails
console.log(v.tooShort);      // true if shorter than minlength
console.log(v.tooLong);       // true if longer than maxlength
console.log(v.rangeUnderflow); // true if less than min
console.log(v.rangeOverflow);  // true if more than max

Die checkValidity-Methode

checkValidity() gibt true oder false zurück und löst das invalid-Ereignis aus:

const form = document.getElementById('my-form');

// Check entire form:
if (!form.checkValidity()) {
  console.log('Form has errors');
}

// Check individual field:
const email = document.getElementById('email');
if (!email.checkValidity()) {
  console.log('Email is invalid');
}
// The 'invalid' event fires on invalid fields

Die reportValidity-Methode

reportValidity() zeigt die native Validierungsoberfläche des Browsers an:

const input = document.getElementById('username');

// Shows native browser error tooltip if invalid:
const valid = input.reportValidity();
console.log(valid);  // true or false

// On a form: validates all fields and shows first error:
document.getElementById('form').reportValidity();

Die validationMessage-Eigenschaft

validationMessage gibt die Fehlertextzeichenfolge des Browsers zurück:

const email = document.querySelector('input[type=email]');
email.value = 'not-an-email';

console.log(email.validationMessage);
// e.g. "Please include an '@' in the email address..."

console.log(email.validity.typeMismatch); // true

setCustomValidity

setCustomValidity(message) setzt einen individuellen Validierungsfehler:

const username = document.getElementById('username');

// Check availability on blur:
username.addEventListener('blur', async () => {
  const res = await fetch(`/check-username?name=${username.value}`);
  const { taken } = await res.json();

  if (taken) {
    username.setCustomValidity('This username is already taken.');
  } else {
    username.setCustomValidity('');  // empty string = clear the error
  }
});

Individuelle Validität zurücksetzen

Sie müssen die individuelle Validität löschen, sobald der Benutzer das Problem behoben hat:

const input = document.getElementById('username');

input.addEventListener('input', () => {
  // Clear custom error when user starts typing again:
  input.setCustomValidity('');
});

input.addEventListener('blur', async () => {
  // Re-validate on blur:
  const taken = await checkUsername(input.value);
  input.setCustomValidity(taken ? 'Username taken' : '');
});

Das invalid-Ereignis

Das invalid-Ereignis wird bei Formularelementen ausgelöst, die die Validierung nicht bestehen:

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('invalid', (e) => {
    e.preventDefault();  // prevent default browser tooltip
    // Show your custom error UI instead:
    showError(input, input.validationMessage);
  });
});

Die willValidate-Eigenschaft

willValidate ist true, wenn das Element an der Constraint-Validierung teilnimmt:

document.querySelectorAll(':input').forEach(el => {
  if (el.willValidate) {
    console.log(el.name, 'will be validated');
  }
});
// Disabled, hidden, or output elements return willValidate = false

validity in der individuellen Validierung verwenden

Ein vollständiges Beispiel für eine individuelle Validierung:

<form id="signup" novalidate>
  <input type="email" id="email" name="email" required>
  <span id="email-err" role="alert"></span>
  <button type="submit">Sign Up</button>
</form>

<script>
const form = document.getElementById('signup');
const email = document.getElementById('email');
const err = document.getElementById('email-err');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  err.textContent = '';

  if (email.validity.valueMissing) {
    err.textContent = 'Email is required.';
    email.focus();
    return;
  }
  if (email.validity.typeMismatch) {
    err.textContent = 'Enter a valid email address.';
    email.focus();
    return;
  }
  // Submit...
});
</script>

Zusammenfassung der ValidityState-Flags

Alle ValidityState-Flags:

valueMissing — erforderlich, aber leer
typeMismatch — falsches Format für den Typ
patternMismatch — das reguläre Ausdrucksmuster stimmt nicht
tooShort / tooLong — minlength/maxlength
rangeUnderflow / rangeOverflow — min/max
stepMismatch — kein gültiger Schrittwert
customError — eine Nachricht von setCustomValidity wurde gesetzt
badInput — der Browser kann den Wert nicht interpretieren

Schnelltest

Wie zeigen Sie programmgesteuert das native Validierungsfehler-Popup des Browsers an?

Zusammenfassung: Constraint Validation API

Das Wichtigste zur Constraint Validation API:

input.validity — ValidityState-Objekt mit bestimmten Flags
checkValidity() — gibt true oder false zurück und löst das invalid-Ereignis aus
reportValidity() — prüft die Eingabe und zeigt die native Fehleroberfläche an
validationMessage — der Fehlertext des Browsers
setCustomValidity(msg) — individuellen Fehler setzen; zum Löschen eine leere Zeichenfolge verwenden

Häufig gestellte Fragen

Ist die Lektion „Grundlagen der Constraint Validation API“ kostenlos?

Ja — der vollständige Text von „Grundlagen der 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 HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Grundlagen der Constraint Validation API“?

Lesen Sie den Gültigkeitsstatus und eigene Meldungen mit der Constraint Validation API aus Du übst HTML 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 HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML 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 „Grundlagen der 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 HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML 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

required pattern min max und maxlength
Das novalidate-Attribut
Grundlagen der Constraint Validation API
HTML5- gegenüber JavaScript-Validierung

← Zurück zu HTML Academy