Валидация данных

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

Работа с формами и событиями

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

let form = u('#myForm');
let inputs = form.find('input, textarea, select');

u('#myForm') возвращает объект Umbrella, который поддерживает все методы библиотеки. Метод find() позволяет получить вложенные элементы формы. Для обработки событий используется метод on:

form.on('submit', function(event) {
    event.preventDefault();
    validateForm(inputs);
});

Здесь preventDefault() блокирует стандартную отправку формы, чтобы выполнить проверку данных перед отправкой на сервер.

Базовая валидация полей

Umbrella JS не содержит встроенных функций для валидации, но удобно интегрируется с кастомными проверками. Основные шаги включают:

  1. Получение значения поля через метод .val().
  2. Проверку значения на соответствие требованиям.
  3. Отображение ошибок пользователю.

Пример функции проверки обязательного поля и формата email:

function validateForm(inputs) {
    let isValid = true;

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

        input.removeClass('error');

        if (!value.trim()) {
            input.addClass('error');
            isValid = false;
        }

        if (type === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
            input.addClass('error');
            isValid = false;
        }
    });

    return isValid;
}

Метод .each() проходит по каждому элементу коллекции Umbrella, attr() возвращает значение атрибута, а addClass() и removeClass() управляют CSS-классами для визуальной индикации ошибок.

Валидация по маске и длине

Проверка данных на соответствие маске или длине особенно полезна для телефонов и паролей. Для этого можно использовать регулярные выражения:

inputs.each(function(el) {
    let input = u(el);
    let value = input.val();
    let pattern = input.attr('data-pattern');
    let minLength = input.attr('data-minlength');

    input.removeClass('error');

    if (pattern && !new RegExp(pattern).test(value)) {
        input.addClass('error');
        isValid = false;
    }

    if (minLength && value.length < parseInt(minLength)) {
        input.addClass('error');
        isValid = false;
    }
});

Использование пользовательских атрибутов data-* позволяет легко задавать правила в HTML без изменения JavaScript-кода.

Асинхронная валидация

Некоторые поля требуют проверки на сервере, например, проверка уникальности логина или email. Umbrella JS поддерживает работу с AJAX через метод request:

function checkUniqueEmail(input) {
    return u.request({
        url: '/check-email',
        method: 'POST',
        data: { email: input.val() }
    }).then(response => {
        if (!response.available) {
            input.addClass('error');
            return false;
        }
        return true;
    });
}

Асинхронные проверки интегрируются с общей функцией валидации через Promise.all, позволяя дождаться результатов всех запросов перед отправкой формы.

Визуальная индикация ошибок

Важно не только проверять данные, но и предоставлять пользователю понятную обратную связь. Umbrella JS облегчает управление DOM-структурой:

inputs.each(function(el) {
    let input = u(el);
    let errorMsg = input.siblings('.error-message');

    if (input.hasClass('error')) {
        errorMsg.text('Неверное значение').show();
    } else {
        errorMsg.hide();
    }
});

Методы siblings(), text() и show()/hide() позволяют динамически управлять содержимым и видимостью элементов ошибок, делая интерфейс интерактивным и информативным.

Комбинирование правил валидации

Umbrella JS позволяет легко комбинировать различные правила валидации, создавая масштабируемую систему проверки данных:

  • Проверка обязательных полей .val().trim()
  • Проверка формата через регулярные выражения
  • Проверка длины и маски
  • Асинхронные запросы на сервер
  • Визуальная индикация ошибок через классы и элементы DOM

Это обеспечивает централизованную и гибкую систему валидации, полностью интегрированную с методами Umbrella JS.

Реакция на изменения полей

Для улучшения UX часто применяют реактивную валидацию, когда поле проверяется сразу при изменении:

inputs.on('input', function() {
    let input = u(this);
    validateField(input);
});

Метод validateField может содержать логику проверки отдельного поля, обновляя визуальную обратную связь в реальном времени. Такой подход снижает количество ошибок при отправке формы и делает интерфейс более отзывчивым.

Расширение возможностей

Umbrella JS легко интегрируется с внешними библиотеками для валидации, например, validator.js или собственными утилитами. При этом сохраняется лаконичный синтаксис:

if (!validator.isEmail(input.val())) {
    input.addClass('error');
}

Поддержка цепочек методов (u(...).find(...).each(...).addClass(...)) позволяет создавать компактные и читаемые проверки.

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

Оглавление