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

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

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

Для работы с формой используется функция $(), аналогичная jQuery.

var form = $('#myForm');        // Вся форма
var inputName = $('#name');     // Поле имени
var inputEmail = $('#email');   // Поле email

Метод .find() позволяет искать элементы внутри формы:

var inputs = form.find('input, textarea, select');

Это удобно для итерации по всем полям и применения одинаковых правил валидации.

Получение и установка значений полей

Для валидации важно уметь считывать значения полей. Zepto предоставляет метод .val():

var nameValue = inputName.val();
inputEmail.val('example@example.com'); // Установка значения

Метод .val() возвращает строку, что удобно для дальнейшей проверки.

Обработка событий формы

Основное событие для валидации — submit. Его можно перехватить и предотвратить стандартное поведение формы:

form.on('submit', function(e) {
    e.preventDefault(); // Отмена стандартной отправки
    validateForm();
});

Метод .on() позволяет назначать обработчики событий не только на формы, но и на отдельные поля:

inputEmail.on('blur', function() {
    validateEmail($(this).val());
});

Событие blur срабатывает при потере фокуса, что удобно для проверки данных по мере ввода.

Простые правила валидации

Для текстовых полей часто используют проверку на пустоту или соответствие регулярному выражению:

function validateNotEmpty(value) {
    return value.trim() !== '';
}

function validateEmail(value) {
    var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailPattern.test(value);
}

Эти функции возвращают true, если значение корректно, и false в противном случае.

Валидация при отправке формы

Можно комбинировать проверки для всех полей и собирать ошибки:

function validateForm() {
    var errors = [];
    if (!validateNotEmpty(inputName.val())) {
        errors.push('Имя не должно быть пустым');
    }
    if (!validateEmail(inputEmail.val())) {
        errors.push('Некорректный email');
    }

    if (errors.length > 0) {
        displayErrors(errors);
    } else {
        submitForm();
    }
}

Вывод сообщений об ошибках

Zepto позволяет динамически изменять DOM для отображения ошибок:

function displayErrors(errors) {
    var errorContainer = $('#errorContainer');
    errorContainer.empty(); // Очистка предыдущих ошибок
    errors.forEach(function(error) {
        errorContainer.append('<div class="error">' + error + '</div>');
    });
}

Метод .empty() очищает содержимое контейнера, .append() добавляет новые элементы.

Интерактивная валидация

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

inputs.on('input', function() {
    var field = $(this);
    if (field.attr('type') === 'email') {
        if (!validateEmail(field.val())) {
            field.addClass('invalid');
        } else {
            field.removeClass('invalid');
        }
    }
});

Методы .addClass() и .removeClass() позволяют визуально подсвечивать некорректные поля.

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

Zepto интегрируется с AJAX для проверки данных на сервере без перезагрузки страницы:

inputEmail.on('blur', function() {
    var email = $(this).val();
    $.ajax({
        type: 'POST',
        url: '/check-email',
        data: { email: email },
        success: function(response) {
            if (!response.available) {
                inputEmail.addClass('invalid');
            } else {
                inputEmail.removeClass('invalid');
            }
        }
    });
});

Метод $.ajax() позволяет гибко настраивать запросы и обрабатывать результат.

Пользовательские правила валидации

Можно создавать собственные функции проверки для любых типов данных:

function validatePassword(value) {
    return value.length >= 8 && /[A-Z]/.test(value) && /\d/.test(value);
}

Эту функцию легко интегрировать в общий процесс проверки формы.

Универсальный подход

Комбинирование всех перечисленных возможностей позволяет строить мощную систему валидации:

  1. Выбор всех необходимых элементов через $() и .find().
  2. Назначение событий через .on().
  3. Считывание и установка значений через .val().
  4. Применение простых и пользовательских правил.
  5. Визуальное выделение ошибок с помощью .addClass()/.removeClass().
  6. Динамическая работа с сервером через $.ajax().

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

Оглавление