Валидация

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

Для начала стоит отметить ключевую функцию библиотеки — выборку элементов. Синтаксис похож на jQuery:

var $$ = Dom7;

var elements = $$('div.my-class'); // выбор всех div с классом my-class

Возвращаемый объект является коллекцией Dom7, поддерживающей цепочку методов для дальнейших операций с элементами.

Добавление и удаление классов

Dom7 предоставляет методы addClass, removeClass и toggleClass для управления CSS-классами:

$$('div.my-class').addClass('active');
$$('div.my-class').removeClass('inactive');
$$('div.my-class').toggleClass('highlighted');

Эти методы применяются к каждому элементу коллекции автоматически. Это упрощает массовые изменения состояния элементов.

Управление атрибутами и свойствами

Методы attr, removeAttr и prop позволяют работать с атрибутами и свойствами DOM:

$$('input[type="text"]').attr('placeholder', 'Введите текст');
$$('input[type="text"]').removeAttr('disabled');

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

$$('input[name="email"]').val('user@example.com');
var emailValue = $$('input[name="email"]').val();

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

Dom7 облегчает работу с событиями через методы on, off и once:

$$('button.submit').on('click', function (e) {
    e.preventDefault();
    console.log('Кнопка нажата');
});

$$('button.submit').off('click'); // отключение обработчика

Метод once гарантирует однократное срабатывание обработчика:

$$('button.submit').once('click', function () {
    console.log('Сработало только один раз');
});

Валидация форм с использованием Dom7

Валидация — это проверка данных формы перед отправкой. Dom7 облегчает этот процесс благодаря удобной работе с элементами и событиями.

Проверка пустых полей:

$$('form').on('submit', function (e) {
    e.preventDefault();
    var isValid = true;

    $$(this).find('input[required]').each(function (input) {
        if ($$(input).val().trim() === '') {
            isValid = false;
            $$(input).addClass('error');
        } else {
            $$(input).removeClass('error');
        }
    });

    if (isValid) {
        console.log('Форма валидна');
    } else {
        console.log('Необходимо заполнить все обязательные поля');
    }
});

Проверка формата email:

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

$$('form').on('submit', function (e) {
    e.preventDefault();
    var emailInput = $$('input[name="email"]');
    if (!validateEmail(emailInput.val())) {
        emailInput.addClass('error');
        console.log('Неверный формат email');
    } else {
        emailInput.removeClass('error');
        console.log('Email корректен');
    }
});

Динамическая валидация при вводе:

$$('input[required]').on('input', function () {
    if ($$(this).val().trim() !== '') {
        $$(this).removeClass('error');
    } else {
        $$(this).addClass('error');
    }
});

Этот подход улучшает UX, так как пользователь видит ошибки сразу при вводе данных.

Работа с кастомными правилами

Dom7 позволяет создавать любые проверки, комбинируя методы работы с DOM и событиями:

$$('form').on('submit', function (e) {
    e.preventDefault();
    var isValid = true;

    $$(this).find('input[data-minlength]').each(function (input) {
        var minLength = parseInt($$(input).attr('data-minlength'), 10);
        if ($$(input).val().length < minLength) {
            isValid = false;
            $$(input).addClass('error');
        } else {
            $$(input).removeClass('error');
        }
    });

    if (isValid) {
        console.log('Форма соответствует всем правилам');
    } else {
        console.log('Поля не соответствуют минимальной длине');
    }
});

Стилизация ошибок и интерактивная обратная связь

Для отображения ошибок часто используют CSS-классы. Например:

input.error {
    border-color: red;
    background-color: #ffe6e6;
}

Совмещение Dom7 и CSS позволяет создавать динамическую визуальную валидацию без дополнительных библиотек.

Интеграция с AJAX и отправка данных

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

$$('form').on('submit', function (e) {
    e.preventDefault();
    var form = $$(this);

    if (form.find('input.error').length === 0) {
        var formData = form.serializeArray(); // получение данных формы
        console.log('Отправка данных', formData);
        // пример AJAX
        fetch('/submit', {
            method: 'POST',
            body: JSON.stringify(formData),
            headers: { 'Content-Type': 'application/json' }
        }).then(response => response.json())
          .then(data => console.log('Ответ сервера:', data));
    }
});

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

Использование Dom7 в комплексной валидации

Комбинация всех возможностей Dom7 позволяет реализовать:

  • Валидацию обязательных полей
  • Проверку формата email, телефонов и паролей
  • Динамическую проверку по длине или маске
  • Отображение ошибок и подсказок в реальном времени
  • Подготовку данных для отправки через AJAX

Это делает Dom7 мощным инструментом для построения интерактивных форм и сложных интерфейсов с минимальным количеством кода.

Оглавление