ValidityState.typeMismatch

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

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

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

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

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

Примеры

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

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

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

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

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

Specification
HTML Standard
# dom-validitystate-typemismatch

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

BCD tables only load in the browser

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