invalid

Событие 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('Неправильная пчела!')
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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