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 July 2015.

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

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

Der email-Eingabetyp erwartet eine oder mehrere gültige E-Mail-Adressen, je nachdem, ob das multiple-Attribut vorhanden ist. Eine gültige E-Mail-Adresse enthält ein E-Mail-Präfix und eine Domain, mit oder ohne Top-Level-Domain. Ist der Wert des E-Mail-Eingabefelds kein leerer String, eine einzelne gültige E-Mail-Adresse oder eine oder mehrere durch Kommas getrennte E-Mail-Adressen, falls das multiple-Attribut vorhanden ist, liegt ein typeMismatch vor.

Der url-Eingabetyp erwartet eine oder mehrere gültige URLs, je nachdem, ob das multiple-Attribut vorhanden ist. Eine gültige URL umfasst ein Protokoll, optional mit einer IP-Adresse oder einer optionalen Subdomain, Domain und einer Top-Level-Domain-Kombination. Ist der Wert des URL-Eingabefelds kein leerer String, eine einzelne gültige URL oder eine oder mehrere durch Kommas getrennte URLs, falls 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

Wert

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

Beispiele

Typfehler bei Eingabeelement

Der typeMismatch tritt auf, wenn eine Diskrepanz zwischen dem über das type-Attribut erwarteten value und den tatsächlich vorhandenen Daten vorhanden ist. Der typeMismatch ist nur einer der vielen möglichen Fehler 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 andere Fehler auf. Zum Beispiel, wenn der Wert eines number-Eingabefelds keine Gleitkommazahl ist, ist der badInput true. Wenn die E-Mail-Adresse 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