ValidityState.valid — Eigenschaft · JavaScript-Referenz

Signatur

ValidityState.valid

Beschreibung

Die Eigenschaft valid des ValidityState-Objekts (erreichbar über element.validity) fasst alle Einzelprüfungen der Constraint-Validation-API zusammen. Sie ist genau dann true, wenn keine der anderen Eigenschaften wie valueMissing, typeMismatch, patternMismatch, tooLong, tooShort, rangeUnderflow, rangeOverflow, stepMismatch, badInput oder customError auf true steht.

Sie eignet sich besonders für eigene Validierungsoberflächen: Statt jede Regel einzeln abzufragen, prüft man zuerst validity.valid und wertet nur im Fehlerfall die Detail-Flags aus, um passende Fehlermeldungen anzuzeigen. Anders als checkValidity() löst das Lesen von valid kein invalid-Ereignis aus und zeigt keine Browser-Meldung an.

Verfügbar ist die Eigenschaft auf <input>, <select>, <textarea>, <button>, <output>, <fieldset> und <object> sowie über ElementInternals.validity bei formularfähigen Custom Elements. Der Wert entspricht dem Zustand, den auch die CSS-Pseudoklassen :valid und :invalid widerspiegeln.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Element alle Validierungsregeln erfüllt; false, sobald mindestens eine Regel verletzt ist (inklusive gesetzter setCustomValidity()-Meldung).

Beispiele

Gültigkeit eines E-Mail-Felds prüfen

// <input id="email" type="email" required>
const email = document.querySelector('#email');

email.value = 'kein-at-zeichen';
console.log(email.validity.valid, email.validity.typeMismatch);

email.value = 'max@example.com';
console.log(email.validity.valid);

false true true

Live-Validierung mit eigenen Fehlermeldungen

// <input id="plz" required pattern="\\d{5}"> <span id="plz-fehler"></span>
const plz = document.querySelector('#plz');
const fehler = document.querySelector('#plz-fehler');

const meldung = (v) => {
  if (v.valueMissing) return 'Bitte eine Postleitzahl eingeben.';
  if (v.patternMismatch) return 'Die PLZ muss aus genau 5 Ziffern bestehen.';
  return 'Ungültige Eingabe.';
};

plz.addEventListener('input', () => {
  const { validity } = plz;
  fehler.textContent = validity.valid ? '' : meldung(validity);
  plz.setAttribute('aria-invalid', String(!validity.valid));
});

Formular ohne Browser-Popups vor dem Absenden prüfen

// <form id="anmeldung" novalidate> ... </form>
const form = document.querySelector('#anmeldung');

form.addEventListener('submit', (event) => {
  const ungueltig = [...form.elements].filter(
    (el) => el.willValidate && !el.validity.valid
  );

  if (ungueltig.length > 0) {
    event.preventDefault();
    ungueltig[0].focus();
    console.log(`${ungueltig.length} Feld(er) ungültig:`, ungueltig.map((el) => el.name));
  }
});

2 Feld(er) ungültig: ["email", "plz"]

Eigene Regel mit setCustomValidity()

// <input id="pw" type="password"> <input id="pw2" type="password">
const pw = document.querySelector('#pw');
const pw2 = document.querySelector('#pw2');

const vergleiche = () => {
  pw2.setCustomValidity(pw.value === pw2.value ? '' : 'Passwörter stimmen nicht überein.');
  console.log('gültig:', pw2.validity.valid, '| customError:', pw2.validity.customError);
};

pw.addEventListener('input', vergleiche);
pw2.addEventListener('input', vergleiche);

gültig: false | customError: true

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie el.validity.valid = true hat keine Wirkung (im Strict Mode ein TypeError). Den Zustand ändert man über Attribute (required, pattern …) oder setCustomValidity().
Eigene Meldung zurücksetzen: Nach setCustomValidity('Text') bleibt valid so lange false, bis setCustomValidity('') aufgerufen wird – ein häufiger Grund für „dauerhaft ungültige“ Felder.
Vom Validieren ausgeschlossene Elemente (disabled, readonly, type="hidden", Elemente innerhalb von <datalist>) melden valid === true, obwohl eventuell Regeln gesetzt sind. Mit el.willValidate lässt sich das prüfen.
novalidate am Formular unterdrückt nur die automatische Prüfung beim Absenden – validity.valid wird weiterhin korrekt berechnet.
Bei <fieldset> ist valid immer true; nur die Pseudoklasse :invalid spiegelt ungültige Nachkommen wider.
Die Prüfung ist rein clientseitig und leicht zu umgehen – serverseitige Validierung bleibt immer nötig.
Kompatibilität: In allen modernen Browsern unterstützt; sehr alte Browser (IE < 10) kennen die Constraint-Validation-API nicht.

Siehe auch

ValidityState HTMLInputElement.validity HTMLInputElement.checkValidity() HTMLInputElement.reportValidity() HTMLInputElement.setCustomValidity() ValidityState.valueMissing ValidityState.customError