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

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

Привязка правил валидации

Каждое поле формы можно привязать к набору правил, используя метод validate. Например, для текстового поля с обязательным вводом и ограничением длины:

let form = Bliss('form#signup');

form.validate({
    username: {
        required: true,
        minLength: 3,
        maxLength: 20
    },
    email: {
        required: true,
        pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    }
});

Ключевые моменты:

  • required — поле должно быть заполнено.
  • minLength и maxLength — минимальная и максимальная длина текста.
  • pattern — регулярное выражение для проверки формата.

Метод validate автоматически следит за событиями input и change, проверяя поле при каждом изменении.

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

Bliss.js поддерживает асинхронные проверки, например, проверку уникальности имени пользователя на сервере. Для этого можно использовать промисы в правилах:

form.validate({
    username: {
        required: true,
        async: async (value) => {
            let response = await fetch(`/api/check-username?name=${value}`);
            let data = await response.json();
            return data.available;
        },
        message: 'Имя пользователя уже занято'
    }
});
  • Если промис возвращает true, поле считается валидным.
  • В случае false можно задать собственное сообщение об ошибке через message.

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

Помимо стандартных проверок, можно создавать свои функции валидации:

function passwordStrength(value) {
    return /[A-Z]/.test(value) && /\d/.test(value);
}

form.validate({
    password: {
        required: true,
        custom: passwordStrength,
        message: 'Пароль должен содержать хотя бы одну цифру и заглавную букву'
    }
});

Особенности пользовательских правил:

  • Функция принимает значение поля и возвращает true или false.
  • Можно комбинировать несколько пользовательских правил в одном поле.

Валидация перед отправкой

Bliss.js позволяет выполнять глобальную проверку всей формы перед отправкой:

form.on('submit', e => {
    e.preventDefault();
    if (form.isValid()) {
        form.submit();
    } else {
        console.log('Форма содержит ошибки');
    }
});

Метод isValid() проверяет все поля на соответствие заданным правилам и возвращает булево значение.

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

Bliss.js интегрирует простой механизм отображения ошибок рядом с полем. Для этого можно использовать метод showError:

form.fields.username.showError('Имя пользователя не может быть пустым');
form.fields.email.clearError();
  • showError(message) выводит сообщение об ошибке.
  • clearError() убирает текущее сообщение.

Также возможно создавать кастомные обработчики для визуализации ошибок через события:

form.on('invalid', field => {
    field.element.style.borderColor = 'red';
});
form.on('valid', field => {
    field.element.style.borderColor = '';
});

Встроенные события

Bliss.js предоставляет следующие события для контроля валидации:

  • valid — поле успешно прошло проверку.
  • invalid — поле не прошло проверку.
  • change — значение поля изменилось.
  • submit — попытка отправки формы.

Использование событий позволяет создавать динамическую обратную связь для пользователя и предотвращать отправку некорректных данных.

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

Валидацию можно применять не только к отдельным полям, но и к логическим группам, например, нескольким чекбоксам или радиокнопкам:

form.validate({
    preferences: {
        required: true,
        minSelected: 1,
        message: 'Выберите хотя бы один вариант'
    }
});
  • minSelected проверяет минимальное количество выбранных элементов.
  • Можно комбинировать с пользовательскими правилами для более сложной логики.

Интеграция с UI-фреймворками

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

Bliss.js предлагает мощный и гибкий подход к валидации форм: от простых проверок до асинхронных запросов на сервер и кастомных правил. Использование встроенных методов и событий обеспечивает компактный, читаемый код и легкую интеграцию с любым пользовательским интерфейсом.

Оглавление