ValidityState: typeMismatch property

The read-only typeMismatch property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's type attribute.

If the type attribute expects specific strings, such as the email and url types and the value doesn't conform to the constraints set by the type, the typeMismatch property will be true.

The email input type expects one or more valid email addresses, depending on whether the multiple 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 the multiple attribute is present, there is a typeMismatch.

The url input type expects one or more valid URLs, depending on whether the multiple 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 the multiple attribute is present, there is a typeMismatch.

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

<p>
  <label>
    Enter an email address:
    <input type="email" value="example.com" />
  </label>
</p>
<p>
  <label>
    Enter a URL:
    <input type="url" value="example.com" />
  </label>
</p>

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