ValidityState.patternMismatch — Eigenschaft · JavaScript-Referenz

Signatur

ValidityState.patternMismatch

Beschreibung

Die Eigenschaft patternMismatch des ValidityState-Objekts (erreichbar über element.validity) gibt an, ob der aktuelle Wert eines <input>-Elements gegen das im pattern-Attribut angegebene Muster verstößt. Ist das der Fall, ist sie true, und das Element passt auf die CSS-Pseudoklasse :invalid.

Das pattern-Attribut gilt nur für die Eingabetypen text, search, url, tel, email und password. Das Muster muss auf den gesamten Wert passen: Der Browser setzt es implizit in ^(?:…)$ und kompiliert es seit einiger Zeit mit dem v-Flag (früher u). Ein leeres Feld löst nie patternMismatch aus. Pflichtfelder prüft man deshalb zusätzlich mit required bzw. valueMissing.

Typischerweise wertet man patternMismatch aus, um eine passende, verständliche Fehlermeldung über setCustomValidity() anzuzeigen oder eigene Validierungs-UIs zu bauen, statt die generische Meldung des Browsers zu verwenden.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Wert nicht leer ist und nicht zum pattern passt. Sonst false, auch wenn das Feld leer ist, kein pattern hat oder der Eingabetyp pattern nicht unterstützt.

Beispiele

Postleitzahl prüfen

// HTML: <input id="plz" pattern="[0-9]{5}">
const plz = document.querySelector('#plz');
plz.value = '1234';
console.log(plz.validity.patternMismatch);
plz.value = '12345';
console.log(plz.validity.patternMismatch);
plz.value = '';
console.log(plz.validity.patternMismatch); // leer = kein Mismatch

true false false

Eigene Fehlermeldung bei Eingabe setzen

// HTML: <input id="kennzeichen" pattern="[A-ZÄÖÜ]{1,3}-[A-Z]{1,2} [0-9]{1,4}" required>
const feld = document.querySelector('#kennzeichen');

feld.addEventListener('input', () => {
  feld.setCustomValidity(''); // Zurücksetzen, sonst bleibt das Feld ungültig
  if (feld.validity.patternMismatch) {
    feld.setCustomValidity('Bitte im Format „M-AB 1234“ eingeben.');
  }
  feld.reportValidity();
});

Formular vor dem Absenden auswerten

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  const fehler = [...form.elements]
    .filter((el) => el.validity?.patternMismatch)
    .map((el) => el.name);

  if (fehler.length > 0) {
    event.preventDefault();
    console.log('Falsches Format in:', fehler.join(', '));
  }
});

Falsches Format in: plz, telefon

// Wichtig · Fallstricke

Leere Werte: Ein leeres Feld liefert immer false. Mit required kombinieren und valueMissing prüfen.
Ganzer Wert: ^ und $ sind überflüssig. Das Muster muss immer den kompletten Wert abdecken, Teiltreffer reichen nicht.
v-Flag: Moderne Browser kompilieren das Muster mit dem v-Flag. Dabei müssen Zeichen wie -, ( oder | innerhalb von Zeichenklassen escaped werden (z. B. [\\w\\-] statt [\\w-]). Ein ungültiges Muster wird stillschweigend ignoriert, und patternMismatch bleibt dann false.
setCustomValidity(): Eine eigene Meldung ändert customError, nicht patternMismatch. Die Meldung muss mit '' wieder gelöscht werden, sonst bleibt das Feld dauerhaft ungültig.
Sicherheit: Die Prüfung im Browser dient nur dem Komfort und lässt sich leicht umgehen. Eingaben müssen immer auch auf dem Server geprüft werden.
<textarea> unterstützt kein pattern. Die Eigenschaft ist dort immer false.

Siehe auch

ValidityState ValidityState.valueMissing ValidityState.typeMismatch ValidityState.valid HTMLInputElement.setCustomValidity() HTMLInputElement.reportValidity() SpeechSynthesisUtterance.pitch