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

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

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