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

Для использования библиотеки Noty в проекте достаточно подключить скрипт и стили через CDN или локально:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/mint.css" />
<script src="https://cdn.jsdelivr.net/npm/noty/lib/noty.min.js"></script>

После подключения создаются уведомления с помощью конструктора new Noty(options), где options — объект настроек. Основные параметры:

  • type – тип уведомления: 'alert', 'success', 'error', 'warning', 'information'.
  • text – содержимое уведомления, может быть HTML.
  • timeout – время автозакрытия в миллисекундах.
  • layout – расположение на странице: 'topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'center'.
  • theme – визуальная тема: 'mint', 'relax', 'sunset' и др.

Пример базового уведомления:

new Noty({
    type: 'success',
    layout: 'topRight',
    text: 'Данные успешно отправлены',
    timeout: 3000,
    theme: 'mint'
}).show();

Валидация данных перед показом уведомления

Часто уведомления используются в контексте форм и пользовательского ввода, где важно проверять данные перед отправкой. Noty не выполняет валидацию напрямую, поэтому требуется интеграция с JavaScript-проверками.

Пример проверки текстового поля:

const form = document.querySelector('#myForm');
const input = form.querySelector('input[name="email"]');

form.addEventListener('submit', function(e) {
    e.preventDefault();
    const value = input.value.trim();

    if (!value) {
        new Noty({
            type: 'error',
            text: 'Поле email не может быть пустым',
            timeout: 2500
        }).show();
        return;
    }

    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(value)) {
        new Noty({
            type: 'warning',
            text: 'Некорректный формат email',
            timeout: 2500
        }).show();
        return;
    }

    new Noty({
        type: 'success',
        text: 'Email корректен и отправлен',
        timeout: 2500
    }).show();
});

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

  • Использование регулярных выражений для проверки формата данных.
  • Разделение типов уведомлений для разных ошибок: 'error' для обязательных полей, 'warning' для некорректного формата.
  • Автоматическое скрытие уведомления через timeout повышает удобство UX.

Настройка поведения уведомлений при валидации

Noty позволяет настраивать дополнительные параметры взаимодействия:

  • progressBar – отображение индикатора таймера.
  • closeWith – список действий для закрытия (['click', 'button']).
  • modal – блокировка взаимодействия с остальной страницей при критических ошибках.

Пример уведомления с модальной блокировкой при ошибке:

new Noty({
    type: 'error',
    text: 'Системная ошибка при валидации данных',
    modal: true,
    timeout: false,
    closeWith: ['button']
}).show();

Группировка и предотвращение дублирования уведомлений

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

let notification = null;

function showUniqueError(message) {
    if (notification) {
        notification.setText(message);
        notification.show();
        return;
    }
    notification = new Noty({
        type: 'error',
        text: message,
        timeout: 3000
    }).show();
}

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

Интеграция с асинхронной валидацией

При отправке данных на сервер может потребоваться проверка через AJAX. В этом случае Noty удобно использовать для отображения промежуточных и финальных результатов:

fetch('/api/validate', {
    method: 'POST',
    body: JSON.stringify({ email: input.value }),
    headers: { 'Content-Type': 'application/json' }
})
.then(response => response.json())
.then(data => {
    if (!data.valid) {
        new Noty({
            type: 'error',
            text: data.message,
            timeout: 3000
        }).show();
    } else {
        new Noty({
            type: 'success',
            text: 'Email прошёл проверку на сервере',
            timeout: 3000
        }).show();
    }
})
.catch(() => {
    new Noty({
        type: 'error',
        text: 'Сервер недоступен',
        timeout: 3000
    }).show();
});

Особенности:

  • Логика отображения уведомлений синхронизируется с результатами валидации на сервере.
  • Ошибки соединения обрабатываются отдельно.
  • Можно использовать type: 'information' для уведомлений о прогрессе.

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

  • Шаблоны уведомлений – создание функции для стандартных сообщений ошибок формы.
  • Многоуровневая валидация – разные типы ошибок для разных полей с индивидуальными Noty.
  • Кастомные темы – визуальное выделение ошибок важного уровня.
  • Callback функции – выполнение дополнительных действий после закрытия уведомления (onClose, onShow).

Пример использования callback:

new Noty({
    type: 'error',
    text: 'Ошибка при валидации',
    timeout: 3000,
    callbacks: {
        onClose: function() {
            input.focus();
        }
    }
}).show();

Итоговая структура валидации с Noty

  1. Проверка обязательных полей и формата данных на клиенте.
  2. Отображение уведомлений разного типа (error, warning, success) с учетом контекста.
  3. Обновление существующих уведомлений для предотвращения дублирования.
  4. Интеграция с серверной валидацией и асинхронными запросами.
  5. Использование прогресс-бара, модальных окон и callback функций для улучшения UX.

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

Оглавление