ValidityState.typeMismatch

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.

Доступное только для чтения свойство typeMismatch объекта ValidityState указывает, соответствует ли изменённое пользователем значение <input> ограничениям атрибута type.

Если атрибут type получает типы вроде email или url, а значение не соответствует ограничениям данного типа, свойство typeMismatch будет true.

Тип email допускает ввод одного или нескольких email-адресов, в зависимости от наличия атрибута multiple. Валидный email-адрес включает префикс электронной почты и домен, с доменом верхнего уровня или без него. Если значение поля email-адреса не является пустой строкой, одним или несколькими email-адресами, разделёнными запятой (если присутствует атрибут multiple), то это typeMismatch.

Тип url допускает ввода одного или нескольких url-адресов, в зависимости от наличия атрибута multiple. Валидный URL-адрес включает протокол с IP-адресом или комбинацией поддоменом, домена и домен верхнего уровня. Если значение поля URL не ялвяется пустой строкой, одним или несколькими URL-адресами, разделёнными запятой (если присутствует атрибут multiple), то это typeMismatch.

Тип input Значение Ожидаемое значение
email x@y или x@y.z Email-адрес с или без TLD
url x: или x://y.z Протокол или полный URL с протоколом

Примеры

Учитывая следующее:

html
<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>
css
input:invalid {
  border: red solid 3px;
}

В примере выше в обоих полях происходит typeMismatch, потому что email-адрес является просто доменом, а URL не содержит протокол

typeMismatch происходит при несоответствии значения, заданного в атрибуте type и содержимым поля. typeMismatch является лишь одной из возможных ошибок и возможна только для полей email и url. Когда введённое значение не соответствует ожидаемому для других полей ввода, в зависимости от типа поля будут возникать разные ошибки. Например, если в поле number ввести значение не являющееся числом с плавающей запятой, badInput будет true. Если обязательное поле email не заполнено, valueMissing будет true.

Спецификации

Specification
HTML
# dom-validitystate-typemismatch

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
typeMismatch

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Смотрите также