ValidityState: typeMismatch property

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⁩.

The read-onlytypeMismatch property of theValidityState interface indicates if the value of an<input>, after having been edited by the user, does not conform to the constraints set by the element'stype attribute.

If thetype attribute expects specific strings, such as theemail andurl types and the value doesn't conform to the constraints set by the type, thetypeMismatch property will be true.

Theemail input type expects one or more valid email addresses, depending on whether themultiple attribute is present. A valid email address includes an email prefix and a domain, with or without a top level domain. If the value of the email input is not an empty string, a single valid email address, or one or more comma separated email address if themultiple attribute is present, there is atypeMismatch.

Theurl input type expects one or more valid URLs, depending on whether themultiple attribute is present. A valid URL includes a protocol, optionally with an IP address, or an optional subdomain, domain, and top level domain combination. If the value of the URL input is not an empty string, a single valid URL, or one or more comma separated URLS if themultiple attribute is present, there is atypeMismatch.

Input type	Value	Expected value
email	`x@y` or`x@y.z`	email address, with or withoutTLD
url	`x:` or`x://y.z`	protocol or full URL with protocol

Value

A boolean that istrue if theValidityState does not conform to the constraints.

Examples

Type mismatch on input element

ThetypeMismatch occurs when there is a disconnect between thevalue expected via thetype attribute and the data that is actually present.ThetypeMismatch is only one of the many possible errors and is only relevant for theemail andurl types.When the value provided doesn't match the expected value based on the type for other input types, you get different errors.For example, if thenumber input value is not a floating point number, thebadInput istrue.If the email isrequired but is empty, thevalueMissing will betrue.

html

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

css

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}`);  }});