События форм

Umbrella JS — лёгкая библиотека для работы с DOM в JavaScript, предоставляющая удобный API для выбора элементов, работы с событиями, манипуляций с атрибутами и стилями. Особое внимание уделяется событиям форм, которые являются ключевым инструментом для интерактивных веб-приложений.

Отслеживание событий формы

События форм делятся на несколько типов: submit, change, input, focus, blur. Umbrella JS позволяет легко привязывать обработчики к этим событиям с помощью метода on.

u('form').on('submit', function(event) {
    event.preventDefault();
    console.log('Форма отправлена');
});
  • u('form') — выбирает все элементы <form> на странице.
  • on('submit', callback) — привязывает обработчик к событию отправки формы.
  • event.preventDefault() — предотвращает стандартное поведение браузера, то есть отправку формы.

Событие change

Событие change срабатывает при изменении значения элементов формы: <input>, <select>, <textarea>.

u('input[name="username"]').on('change', function(event) {
    console.log('Новое значение:', event.target.value);
});

Особенность change в том, что оно срабатывает только после потери фокуса или подтверждения изменения, а не в процессе ввода.

Событие input

Событие input срабатывает при каждом изменении значения элемента формы. Это удобно для динамической валидации или подсказок.

u('input[name="email"]').on('input', function(event) {
    const value = event.target.value;
    console.log('Текущее значение:', value);
});

input является более “живым”, чем change, и позволяет реагировать на каждый символ при вводе.

Обработка фокуса и потери фокуса

Umbrella JS поддерживает события focus и blur. Они полезны для подсветки активного поля или скрытия ошибок при потере фокуса.

u('input, textarea').on('focus', function() {
    u(this).css('border', '2px solid blue');
});

u('input, textarea').on('blur', function() {
    u(this).css('border', '');
});
  • this внутри обработчика указывает на конкретный элемент, на котором произошло событие.
  • Метод css позволяет динамически менять стили элемента.

Делегирование событий для форм

Umbrella JS поддерживает делегирование событий через второй аргумент метода on, что позволяет привязывать обработчики к родительскому элементу для динамически добавляемых элементов.

u('form').on('input', 'input[name="dynamic"]', function(event) {
    console.log('Изменение динамического поля:', event.target.value);
});

Это особенно полезно при работе с формами, где поля создаются динамически через JavaScript.

Валидация форм

С помощью Umbrella JS можно легко реализовать клиентскую валидацию:

u('form').on('submit', function(event) {
    event.preventDefault();
    let valid = true;

    u(this).find('input[required]').each(function() {
        if (!u(this).val().trim()) {
            valid = false;
            u(this).css('border', '2px solid red');
        } else {
            u(this).css('border', '');
        }
    });

    if (valid) {
        console.log('Форма готова к отправке');
    }
});
  • Метод find позволяет искать элементы внутри формы.
  • each используется для перебора выбранных элементов.
  • val() возвращает текущее значение элемента формы.

Сброс формы

Umbrella JS упрощает очистку формы:

u('form')[0].reset();

Для более комплексной очистки отдельных полей можно использовать:

u('input, textarea').val('');

Работа с чекбоксами и радио-кнопками

Для checkbox и radio важно правильно получать значение:

u('input[type="checkbox"]').on('change', function() {
    console.log(this.checked);
});

u('input[name="gender"]').on('change', function() {
    console.log(u('input[name="gender"]:checked').val());
});
  • this.checked возвращает булевое значение для чекбокса.
  • Селектор :checked помогает получить выбранный radio button или checkbox.

Асинхронная отправка формы

Umbrella JS хорошо интегрируется с fetch для AJAX-запросов:

u('form').on('submit', function(event) {
    event.preventDefault();
    const data = new FormData(this);

    fetch(this.action, {
        method: 'POST',
        body: data
    })
    .then(response => response.json())
    .then(json => console.log('Ответ сервера:', json))
    .catch(error => console.error('Ошибка:', error));
});
  • FormData автоматически собирает все поля формы.
  • Umbrella JS не препятствует использованию стандартного JavaScript для работы с асинхронностью.

Итоговые особенности событий форм в Umbrella JS

  • Простое привязывание событий через on.
  • Поддержка делегирования для динамических форм.
  • Методы val, find, each упрощают работу с полями.
  • Лёгкая интеграция с асинхронной отправкой и валидацией.

Umbrella JS предоставляет компактный и удобный синтаксис для работы с формами, позволяя обрабатывать события, управлять данными и изменять элементы интерфейса без громоздкого кода.

Оглавление