События Формы

Рассмотрим основные события форм: отправка формы, очистка полей, фокус элемента формы, потеря фокуса, события для input, select, checkbox и многое другое.

Содержание:

  1. события формы:
    1. отправка формы (submit);
    2. очистка формы (reset);
    3. невалидность формы (invalid);
  2. события элементов формы:
    1. input, textarea;
    2. select;
    3. checkbox, radio;
    4. range.

Событие отправки формы

Слушать событие отправки формы можно при помощи submit.

<form id="my_form">
    <input type="text" plceholder="Введите текст">
    <button type="submit">Отправить форму</button>
    <button type="reset">Очистка полей формы</button>
</form>

Чтобы поймать событие отправки формы, используйте submit.

my_form.addEventListener("submit", () => {
    console.log("Событие отправки формы")
})

Очистка полей формы

Событие очистки полей формы.

my_form.addEventListener("reset", () => {
    console.log("Событие очистки полей формы")
})

Метод для очистки полей формы.

my_form.reset()

Невалидность полей формы

Событие invalid срабатывает при попытке отправить форму, когда одно или несколько полей формы неверно заполнены. Или не заполнены, когда поле имеет атрибут required.

my_form.addEventListener("invalid", (e) => {
    console.log("Значения формы не валидны");
}, true)

Как реализовать проверку правильности ввода данных, можете прочитать в статье про валидацию input.

События input, textarea

На input и textarea можно слушать следующие события:

  • input - событие ввода
  • change - событие изменения input (срабатывает после изменения поля и потери фокуса);
  • focus - выбор элемента, фокус;
  • blur - потеря фокуса;
  • select - выделение текста;
  • keyup - событие отпускание кнопки;
  • contextmenu - правый щелчок мыши.
<form class="form-events">
    <input type="text" name="HTML">
    <input type="text" name="JavaScript">
    <textarea></textarea>
</form>
const inputs = document.querySelectorAll(".form-events input");

inputs.forEach(el => {
    el.addEventListener("change", function () {
        // ваш код
    })
});

Посмотреть когда срабатывают основные события форм, можете ниже.

События select

Для элемента select можем отслеживать следующие события:

  • change - выбор элемента из списка (option);
  • focus - фокус на select;
  • blur - потеря фокуса select.
<select id="my_select" name="События элемента select">
    <option value="change">Выбор option</option>
    <option value="focus">Фокус select</option>
    <option value="blur">Потеря фокуса select</option>
</select>
my_select.addEventListener("change", () => console.log("Выбран пункт из списка select"));

В примере ниже посмотрите, когда какие события срабатывают для элемента формы select.

Если вам интересно как стилизуется select, вот ссылка на статью.

События checkbox / radio

Для checkbox / radio можно использовать следующие события:

  • click - клик мыши по checkbox / radio;
  • change - выбор чекбокса / radio кнопки;
<input type="checkbox" id="checkb">
<input type="radio" id="radio">
checkb.addEventListener("change", () => console.log(checkb.value));
radio.addEventListener("click", () => console.log(radio.value));

Здесь вам пригодятся знания, как проверить состояние чекбокса.

События range

Для input type range используют следующие события:

  • change - происходит в момент отпускания кнопки;
  • input - происходит в режиме реального времени.
<input type="range" id="range">
range.addEventListener("change", () => console.log(range.value));