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.
Примеры
Учитывая следующее:
<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 и url. Когда введённое значение не соответствует ожидаемому для других полей ввода, в зависимости от типа поля будут возникать разные ошибки. Например, если в поле number ввести значение не являющееся числом с плавающей запятой, badInput будет true. Если обязательное поле email не заполнено, valueMissing будет true.
Спецификации
| Specification |
|---|
| HTML # dom-validitystate-typemismatch |