ValidityState: typeMismatch-Eigenschaft

Die schreibgeschützte typeMismatch-Eigenschaft des ValidityState-Interfaces zeigt an, ob der Wert eines <input>, nachdem er vom Benutzer bearbeitet wurde, nicht den durch das type-Attribut des Elements festgelegten Einschränkungen entspricht.

Wenn das type-Attribut bestimmte Zeichenfolgen erwartet, wie z.B. die email- und url-Typen, und der Wert nicht den vom Typ festgelegten Einschränkungen entspricht, ist die typeMismatch-Eigenschaft wahr.

Der email-Eingabetyp erwartet eine oder mehrere gültige E-Mail-Adressen, abhängig davon, ob das multiple-Attribut vorhanden ist. Eine gültige E-Mail-Adresse umfasst ein E-Mail-Präfix und eine Domain, mit oder ohne Top-Level-Domain. Wenn der Wert des E-Mail-Eingabefeldes nicht ein Leerstring, eine einzelne gültige E-Mail-Adresse oder eine oder mehrere durch Kommas getrennte E-Mail-Adressen ist, sofern das multiple-Attribut vorhanden ist, liegt ein typeMismatch vor.

Der url-Eingabetyp erwartet eine oder mehrere gültige URLs, abhängig davon, ob das multiple-Attribut vorhanden ist. Eine gültige URL umfasst ein Protokoll, optional mit einer IP-Adresse, oder eine optionale Subdomain, Domain und Kombination mit Top-Level-Domain. Wenn der Wert des URL-Eingabefeldes nicht ein Leerstring, eine einzelne gültige URL oder eine oder mehrere durch Kommas getrennte URLs ist, sofern das multiple-Attribut vorhanden ist, liegt ein typeMismatch vor.

Eingabetyp	Wert	Erwarteter Wert
email	x@y oder x@y.z	E-Mail-Adresse, mit oder ohne TLD
url	x: oder x://y.z	Protokoll oder vollständige URL mit Protokoll

<pre id="log">Validation logged here...</pre>
<p>
  <label>
    Enter an email address:
    <input id="emailInput" type="email" value="example.com" required />
  </label>
</p>

input:invalid {
  border: red solid 3px;
}

body {
  margin: 0.5rem;
}
pre {
  padding: 1rem;
  height: 2rem;
  background-color: lightgrey;
  outline: 1px solid grey;
}

const emailInput = document.getElementById("emailInput");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

emailInput.addEventListener("input", () => {
  emailInput.reportValidity();
  if (emailInput.validity.valid) {
    log("Input OK…");
  } else if (emailInput.validity.typeMismatch) {
    log("Input is not an email.");
  } else {
    log("Validation failed: " + emailInput.validationMessage);
  }
});