Использование с jQuery

Совместное использование jQuery и Validator.js строится вокруг идеи перехвата событий формы, управления DOM-элементами и расширения стандартной валидации через удобные цепочки методов. Несмотря на появление современных фреймворков, подобная связка остаётся актуальной в проектах с классической архитектурой, где jQuery отвечает за взаимодействие с интерфейсом, а Validator.js — за правила проверки данных.

Базовая инициализация в среде jQuery

Работа начинается с подключения библиотек и инициализации логики после загрузки DOM. В типичной структуре jQuery используется событие $(document).ready, внутри которого происходит настройка валидатора.

$(document).ready(function () {
    const validator = new Validator();
});

В подобных сценариях Validator.js используется как отдельный слой логики, не зависящий от DOM напрямую, а jQuery обеспечивает привязку этой логики к форме и её элементам.

Перехват отправки формы через jQuery

Основной механизм интеграции — обработка события submit. jQuery позволяет централизованно перехватить отправку формы и передать данные в Validator.js для проверки.

$(document).ready(function () {
    const validator = new Validator();

    $('#loginForm').on('submit', function (event) {
        event.preventDefault();

        const data = {
            email: $('#email').val(),
            password: $('#password').val()
        };

        const result = validator.validate(data);

        if (result.isValid) {
            this.submit();
        } else {
            renderErrors(result.errors);
        }
    });
});

Такой подход позволяет разделить ответственность: jQuery управляет событиями, Validator.js — правилами проверки.

Передача данных из DOM в слой валидации

Одной из ключевых задач является преобразование DOM-значений в структурированный объект. jQuery предоставляет удобный API для извлечения значений полей, но важно сохранять единый формат данных для Validator.js.

function collectFormData(form) {
    return {
        username: $(form).find('input[name="username"]').val(),
        email: $(form).find('input[name="email"]').val(),
        age: Number($(form).find('input[name="age"]').val())
    };
}

Validator.js при этом работает исключительно с чистыми объектами, не завися от структуры HTML.

Отображение ошибок через jQuery

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

function renderErrors(errors) {
    $('.error-message').remove();

    Object.keys(errors).forEach(field => {
        const message = errors[field];
        const input = $('[name="' + field + '"]');

        input.addClass('error');

        $('<div class="error-message"></div>')
            .text(message)
            .insertAfter(input);
    });
}

Такой механизм позволяет быстро обновлять интерфейс без перезагрузки страницы.

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

Интерактивная проверка полей реализуется через события input и change. jQuery обеспечивает удобную подписку на эти события, а Validator.js выполняет проверку отдельных значений.

$(document).ready(function () {
    const validator = new Validator();

    $('#email').on('input', function () {
        const value = $(this).val();
        const result = validator.validateField('email', value);

        toggleFieldState($(this), result);
    });
});

function toggleFieldState(element, result) {
    if (result.isValid) {
        element.removeClass('error').addClass('valid');
    } else {
        element.removeClass('valid').addClass('error');
    }
}

Такой подход снижает количество ошибок на этапе заполнения формы.

Расширение правил Validator.js в jQuery-контексте

Validator.js позволяет добавлять собственные правила, которые затем могут быть использованы в jQuery-обработчиках.

validator.addRule('strongPassword', function (value) {
    return value.length >= 8 && /[A-Z]/.test(value) && /[0-9]/.test(value);
});

Использование в обработке формы:

$('#password').on('input', function () {
    const value = $(this).val();
    const result = validator.runRule('strongPassword', value);

    if (!result) {
        $(this).addClass('error');
    } else {
        $(this).removeClass('error');
    }
});

Такой механизм позволяет гибко расширять логику проверки без изменения основной структуры приложения.

Валидация нескольких форм на странице

При работе с несколькими формами jQuery обеспечивает удобный обход элементов DOM, а Validator.js применяет единые правила ко всем экземплярам.

$('form').each(function () {
    $(this).on('submit', function (event) {
        event.preventDefault();

        const data = collectFormData(this);
        const validator = new Validator();

        const result = validator.validate(data);

        if (!result.isValid) {
            renderErrors(result.errors);
        }
    });
});

Такой подход позволяет централизовать логику и избежать дублирования кода.

Асинхронная проверка данных через jQuery AJAX

Validator.js может быть расширен асинхронными проверками, например, для проверки уникальности email. jQuery предоставляет механизм AJAX-запросов.

validator.addAsyncRule('emailUnique', function (value) {
    return $.ajax({
        url: '/check-email',
        method: 'POST',
        data: { email: value }
    });
});

Использование:

$('#email').on('blur', function () {
    const value = $(this).val();

    validator.runAsyncRule('emailUnique', value)
        .then(function (isUnique) {
            if (!isUnique) {
                $('#email').addClass('error');
            }
        });
});

Асинхронные правила особенно полезны при работе с серверной валидацией.

Делегирование событий и оптимизация

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

$(document).on('input', '.dynamic-field', function () {
    const validator = new Validator();
    const value = $(this).val();

    const result = validator.validateField($(this).data('rule'), value);

    toggleFieldState($(this), result);
});

Делегирование снижает нагрузку на DOM и упрощает поддержку динамических интерфейсов.

Синхронизация состояния формы

В сложных интерфейсах важно поддерживать единое состояние формы. jQuery используется для управления визуальной частью, Validator.js — для логики состояния.

function updateFormState(form, result) {
    if (result.isValid) {
        $(form).find('button[type="submit"]').prop('disabled', false);
    } else {
        $(form).find('button[type="submit"]').prop('disabled', true);
    }
}

Такой подход предотвращает отправку некорректных данных.

Работа с группами полей

Некоторые правила зависят от нескольких полей одновременно, например подтверждение пароля. jQuery позволяет легко извлекать значения связанных элементов.

$('#confirmPassword').on('input', function () {
    const password = $('#password').val();
    const confirm = $(this).val();

    const isValid = validator.validateMatch(password, confirm);

    if (!isValid) {
        $(this).addClass('error');
    } else {
        $(this).removeClass('error');
    }
});

Validator.js при этом обеспечивает единый интерфейс для таких проверок.

Интеграция с кастомными UI-компонентами

При использовании кастомных элементов интерфейса jQuery остаётся инструментом для доступа к состоянию компонента, а Validator.js — для проверки логики.

$('.select-component').on('change', function () {
    const value = $(this).data('value');

    const result = validator.validateField('country', value);

    toggleFieldState($(this), result);
});

Такой подход позволяет использовать валидацию независимо от того, как реализован UI.

Централизация правил валидации

Для сложных проектов правила Validator.js часто выносятся в отдельный модуль, а jQuery отвечает только за их применение.

const rules = {
    email: ['required', 'email'],
    password: ['required', 'strongPassword']
};

$(document).ready(function () {
    const validator = new Validator(rules);

    $('#form').on('submit', function (e) {
        e.preventDefault();

        const data = collectFormData(this);
        const result = validator.validate(data);

        if (!result.isValid) {
            renderErrors(result.errors);
        }
    });
});

Такое разделение упрощает масштабирование проекта и поддержку кода.