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