invalid

Проверяем валидность формы.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

Событие invalid срабатывает при попытке отправить форму форму с неверными значениями. Например, если не заполнено одно из необходимых полей.

        
          
          <input type="text" required />
          <input type="text" required />

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

На invalid можно подписаться и отреагировать, например, вывести фразу или массив с неправильными данными в консоль:

        
          
          const gandalf = document.querySelector('input')gandalf.addEventListener('invalid', (event) => {  console.log('Ты не пройдешь!')});
          const gandalf = document.querySelector('input')

gandalf.addEventListener('invalid', (event) => {
  console.log('Ты не пройдешь!')
});

        
        
          
        
      

Как понять

Секция статьи "Как понять"

Событие invalid срабатывает после события submit при проверке полей формы если значение в одном из полей не соответствует условию.

Если в форме ниже ввести значение 6, сработает событие invalid, так как на поле есть проверка max=5:

        
          
          <form>    <label for="input-containter">Введите количество пчёл от 1 до 5:</label>    <input id="input-containter" type="number" min="1" max="5" required /></form><div>    <button type="submit" value="submit">Получить мёд</button></div>
          <form>
    <label for="input-containter">Введите количество пчёл от 1 до 5:</label>
    <input id="input-containter" type="number" min="1" max="5" required />
</form>
<div>
    <button type="submit" value="submit">Получить мёд</button>
</div>

        
        
          
        
      
        
          
          const input = document.querySelector("input");input.addEventListener('invalid', (event) => {    alert('Неправильная пчела!');});
          const input = document.querySelector("input");

input.addEventListener('invalid', (event) => {
    alert('Неправильная пчела!');
});

        
        
          
        
      

Можно настроить то, как будут отображаться ошибки проверки формы.