Валидация на стороне клиента

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

Выбор элементов формы

Для валидации форм необходимо получить доступ к самим элементам. Umbrella JS позволяет выбирать элементы с помощью CSS-селекторов:

let form = u('#registrationForm');
let inputs = u('#registrationForm input');
  • u('#registrationForm') возвращает объект Umbrella JS, содержащий выбранный элемент формы.
  • u('#registrationForm input') возвращает коллекцию всех полей ввода в форме.

Важно: Umbrella JS всегда возвращает объект, поддерживающий методы библиотеки, даже если элемент один. Это обеспечивает последовательное использование методов.

Добавление обработчика события submit

Для проверки данных перед отправкой используется событие submit. Umbrella JS предоставляет метод .on() для привязки обработчиков:

form.on('submit', function(event) {
    event.preventDefault(); // предотвращает стандартную отправку формы
    validateForm(inputs);
});
  • event.preventDefault() блокирует отправку формы, пока данные не прошли проверку.
  • Метод .on() универсален и поддерживает любые DOM-события.

Проверка значений полей

Валидация обычно включает проверку обязательных полей, длины текста, формата email и других условий. Umbrella JS облегчает перебор элементов с помощью .each():

function validateForm(fields) {
    let valid = true;

    fields.each(function(input) {
        let value = u(input).val().trim();
        let type = u(input).attr('type');

        if (!value) {
            markInvalid(input, 'Поле обязательно для заполнения');
            valid = false;
        } else if (type === 'email' && !validateEmail(value)) {
            markInvalid(input, 'Некорректный email');
            valid = false;
        } else {
            markValid(input);
        }
    });

    if (valid) {
        fields.closest('form').get(0).submit();
    }
}

function validateEmail(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
  • .each() перебирает все выбранные элементы, предоставляя их как аргумент функции.
  • Метод .val() получает текущее значение поля, а .attr('type') — тип поля.
  • markInvalid() и markValid() управляют отображением ошибок (например, добавляют/удаляют CSS-классы).

Манипуляция классами и стилями

Для визуальной индикации ошибок используют методы .addClass() и .removeClass():

function markInvalid(element, message) {
    let input = u(element);
    input.addClass('invalid');
    input.after(`<span class="error">${message}</span>`);
}

function markValid(element) {
    let input = u(element);
    input.removeClass('invalid');
    u(input.next('.error')).remove();
}
  • .addClass('className') добавляет CSS-класс элементу.
  • .removeClass('className') удаляет класс.
  • .after(html) вставляет HTML после элемента, что удобно для отображения сообщений об ошибках.
  • .next(selector) позволяет выбрать следующий соседний элемент по селектору.

Динамическая проверка полей

Umbrella JS позволяет вешать обработчики на отдельные события, например input или change, для динамической валидации:

inputs.on('input', function() {
    let input = u(this);
    if (input.val().trim()) {
        markValid(this);
    } else {
        markInvalid(this, 'Поле не может быть пустым');
    }
});
  • Такой подход уменьшает количество ошибок при отправке формы, так как пользователь получает мгновенную обратную связь.
  • .on() поддерживает делегирование и множество событий одновременно.

Групповая валидация чекбоксов и радио

Для проверки групп элементов Umbrella JS предоставляет методы фильтрации .filter() и поиска .find():

let interests = u('input[name="interests[]"]');
form.on('submit', function(event) {
    event.preventDefault();
    if (!interests.filter(':checked').length) {
        alert('Необходимо выбрать хотя бы один интерес');
    } else {
        this.submit();
    }
});
  • .filter(selector) возвращает подмножество элементов, удовлетворяющих селектору.
  • В примере проверяется, что хотя бы один чекбокс выбран.

Работа с атрибутами и данными

Валидацию можно расширять, используя пользовательские атрибуты data-*:

inputs.each(function(input) {
    let required = u(input).data('required');
    if (required && !u(input).val().trim()) {
        markInvalid(input, 'Обязательное поле');
    }
});
  • .data('key') позволяет считывать данные, указанные в data-key="value".
  • Это удобно для создания универсальной системы валидации без жесткой привязки к именам полей.

Суммарная проверка с помощью цепочек

Umbrella JS поддерживает цепочки методов, что делает код компактным:

u('#registrationForm input').each(function(input) {
    let el = u(input);
    el.val().trim() ? el.removeClass('invalid') : el.addClass('invalid');
});
  • Позволяет сразу применять несколько действий к выбранным элементам.
  • Уменьшает количество временных переменных и повышает читаемость кода.

Интеграция с AJAX

После успешной валидации форма может отправляться через AJAX без перезагрузки страницы:

form.on('submit', function(event) {
    event.preventDefault();
    if (validateForm(inputs)) {
        u.ajax({
            url: '/submit',
            method: 'POST',
            data: this.serialize(),
            success: function(response) {
                alert('Данные успешно отправлены');
            },
            error: function() {
                alert('Ошибка при отправке формы');
            }
        });
    }
});
  • this.serialize() преобразует данные формы в строку для отправки.
  • u.ajax() — встроенный метод Umbrella JS для AJAX-запросов.

Использование Umbrella JS для валидации обеспечивает лёгкость кода, высокую читаемость и возможность динамической проверки с минимальным количеством дополнительных зависимостей. Ее методы позволяют обрабатывать формы любого уровня сложности, управлять ошибками и интегрировать отправку данных через AJAX, сохраняя компактность и модульность кода.

Оглавление