ValidityState: typeMismatch-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.

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

Wenn das type-Attribut bestimmte Strings erwartet, wie bei den Typen email und url, und der Wert nicht den durch den Typ festgelegten Einschränkungen entspricht, wird die typeMismatch-Eigenschaft wahr sein.

Der email-Eingabetyp erwartet je nach Vorhandensein des multiple-Attributs eine oder mehrere gültige E-Mail-Adressen. Eine gültige E-Mail-Adresse enthält ein E-Mail-Präfix und eine Domain, mit oder ohne Top-Level-Domain. Wenn der Wert der E-Mail-Eingabe nicht eine leere Zeichenkette, eine einzelne gültige E-Mail-Adresse oder eine oder mehrere durch Kommas getrennte E-Mail-Adressen ist, gibt es einen typeMismatch.

Der url-Eingabetyp erwartet je nach Vorhandensein des multiple-Attributs eine oder mehrere gültige URLs. Eine gültige URL enthält ein Protokoll, optional mit einer IP-Adresse, oder eine optionale Subdomain, Domain und Top-Level-Domain-Kombination. Wenn der Wert der URL-Eingabe nicht eine leere Zeichenkette, eine einzelne gültige URL oder eine oder mehrere durch Kommas getrennte URLs ist, gibt es einen typeMismatch.

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

Wert

Ein Boolean, der true ist, wenn der ValidityState nicht den Einschränkungen entspricht.

Beispiele

Typenfehlanpassung bei Input-Elementen

Der typeMismatch tritt auf, wenn es eine Diskrepanz zwischen dem über das type-Attribut erwarteten value und den tatsächlich vorhandenen Daten gibt. Der typeMismatch ist nur einer von vielen möglichen Fehlern und ist nur relevant für die Typen email und url. Wenn der bereitgestellte Wert nicht dem erwarteten Wert basierend auf dem Typ für andere Eingabetypen entspricht, treten verschiedene Fehler auf. Zum Beispiel, wenn der number-Eingabewert keine Gleitkommazahl ist, wird badInput true. Wenn die E-Mail required ist, aber leer bleibt, wird valueMissing true sein.

html
<pre id="log">Validation logged here...</pre>
<p>
  <label>
    Enter an email address:
    <input id="emailInput" type="email" value="example.com" required />
  </label>
</p>
css
input:invalid {
  border: red solid 3px;
}
js
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);
  }
});

Spezifikationen

Specification
HTML
# dom-validitystate-typemismatch

Browser-Kompatibilität

Siehe auch