ValidityState.typeMismatch — Eigenschaft · JavaScript-Referenz

Signatur

ValidityState.typeMismatch

Beschreibung

Die Eigenschaft typeMismatch des ValidityState-Objekts (erreichbar über element.validity) zeigt an, ob der aktuelle Wert eines Eingabefelds syntaktisch nicht zum angegebenen Typ passt. Relevant ist sie nur für die Typen email und url: Ein Feld type="email" mit dem Wert "max@" oder ein Feld type="url" mit "beispiel.de" (ohne Schema) liefert true.

Bei type="email" mit dem Attribut multiple wird jede kommagetrennte Adresse einzeln geprüft; ist eine davon ungültig, ist typeMismatch true. Leere Felder erzeugen keinen Typfehler – dafür ist valueMissing in Kombination mit required zuständig.

Typische Einsatzgebiete sind eigene, benutzerfreundliche Fehlermeldungen per setCustomValidity(), Live-Validierung beim Tippen und das gezielte Hervorheben fehlerhafter Felder. Ist typeMismatch true, ist gleichzeitig validity.valid false und das Element matcht die CSS-Pseudoklasse :invalid.

Beispiele

E-Mail-Feld auf Typfehler prüfen

const input = document.createElement('input');
input.type = 'email';

input.value = 'max@';
console.log(input.validity.typeMismatch);

input.value = 'max@beispiel.de';
console.log(input.validity.typeMismatch);

input.value = '';
console.log(input.validity.typeMismatch); // leer = kein Typfehler

true false false

Eigene Fehlermeldung beim Tippen setzen

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

email.addEventListener('input', () => {
  if (email.validity.typeMismatch) {
    email.setCustomValidity('Bitte eine gültige E-Mail-Adresse wie name@beispiel.de eingeben.');
  } else {
    email.setCustomValidity(''); // Fehler zurücksetzen!
  }
});

URL-Feld vor dem Absenden validieren

// <form id="profil" novalidate><input name="website" type="url"><output id="fehler"></output></form>
const form = document.querySelector('#profil');
const fehler = document.querySelector('#fehler');

form.addEventListener('submit', (event) => {
  const website = form.elements.website;
  if (website.validity.typeMismatch) {
    event.preventDefault();
    fehler.textContent = 'Die URL muss mit http:// oder https:// beginnen.';
    website.focus();
  }
});

Mehrere E-Mail-Adressen mit multiple

const input = document.createElement('input');
input.type = 'email';
input.multiple = true;

input.value = 'a@beispiel.de, b@beispiel.de';
console.log(input.validity.typeMismatch);

input.value = 'a@beispiel.de, kaputt';
console.log(input.validity.typeMismatch);

false true

// Wichtig · Fallstricke

Nur email und url: Bei anderen Typen (number, date …) ist typeMismatch praktisch immer false, da ungültige Eingaben dort meist zu einem leeren Wert bzw. badInput führen.
Lockere Prüfung: Die Browser-Prüfung für E-Mails ist bewusst tolerant – max@localhost gilt als gültig. type="url" akzeptiert jedes absolute URL-Schema, auch javascript:alert(1). Für strengere Regeln zusätzlich pattern verwenden.
Keine Sicherheitsgarantie: Clientseitige Validierung lässt sich umgehen. Werte immer serverseitig prüfen; URLs vor dem Einbetten in href auf erlaubte Schemas (http/https) beschränken (XSS-Gefahr).
setCustomValidity() zurücksetzen: Eine gesetzte Fehlermeldung bleibt bestehen, bis sie mit '' gelöscht wird – sonst bleibt das Feld dauerhaft ungültig.
Die Eigenschaft ist schreibgeschützt und wird bei jeder Wertänderung neu berechnet. Unterstützt in allen modernen Browsern.

Siehe auch

ValidityState ValidityState.valid ValidityState.patternMismatch ValidityState.badInput ValidityState.valueMissing HTMLInputElement.setCustomValidity() HTMLInputElement.checkValidity() HTMLInputElement.validity