ValidityState: свойство typeMismatch

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

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

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

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

Логическое значение, которое равно true , если ValidityState не соответствует ограничениям.

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

<pre id="log">Validation logged here...</pre>
<p>
  <label>
    Enter an email address:
    <input id="emailInput" type="email" value="example.com" required />
  </label>
</p>

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

const emailInput = document.getElementById("emailInput");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

emailInput.addEventListener("input", () => {
  emailInput.reportValidity();
  if (emailInput.validity.valid) {
    log("Input OK…");
  } else if (emailInput.validity.typeMismatch) {
    log("Input is not an email.");
  } else {
    log("Validation failed: " + emailInput.validationMessage);
  }
});

• Свойства ValidityState badInput, valid, customError.
• Проверка ограничений
• Формы: Проверка данных формы
• Регулярные выражения