Уведомления с формами ввода

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

Основные параметры для интерактивных уведомлений

Для уведомлений с формами используются стандартные настройки Noty с дополнительными возможностями через template и callbacks. Ключевые параметры:

  • text – HTML-контент уведомления, может содержать форму или элементы <input>, <textarea>, <select> и кнопки.
  • layout – расположение уведомления (topRight, bottomLeft, center и другие).
  • type – тип уведомления (alert, success, warning, error, info).
  • theme – визуальная тема, например metroui, mint, relax.
  • timeout – время автозакрытия; для форм обычно устанавливается false.
  • buttons – массив кнопок, каждая из которых может выполнять действие и закрывать уведомление.
  • callbacks – объект с функциями для событий onShow, onClose, onCloseClick.

Пример простого уведомления с текстовым вводом

new Noty({
    text: `
        <form id="notyForm">
            <label for="username">Имя пользователя:</label>
            <input type="text" id="username" name="username" />
        </form>
    `,
    layout: 'topRight',
    type: 'info',
    theme: 'mint',
    timeout: false,
    buttons: [
        Noty.button('Отправить', 'btn btn-success', function (noty) {
            const input = document.getElementById('username').value;
            console.log('Введено:', input);
            noty.close();
        }),
        Noty.button('Отмена', 'btn btn-error', function (noty) {
            noty.close();
        })
    ]
}).show();

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

  • timeout: false предотвращает автоматическое закрытие.
  • Кнопки создаются через Noty.button(label, className, callback).
  • Значение из поля формы извлекается стандартным DOM-методом getElementById().value.

Добавление нескольких полей и валидация

Формы в уведомлениях могут включать несколько элементов, включая чекбоксы, radio-кнопки и select. Валидацию данных рекомендуется выполнять до закрытия уведомления:

new Noty({
    text: `
        <form id="loginForm">
            <input type="text" id="email" placeholder="Email" required />
            <input type="password" id="password" placeholder="Пароль" required />
        </form>
    `,
    layout: 'center',
    type: 'alert',
    theme: 'metroui',
    timeout: false,
    buttons: [
        Noty.button('Войти', 'btn btn-primary', function (noty) {
            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value.trim();
            if (!email || !password) {
                alert('Все поля должны быть заполнены!');
                return;
            }
            console.log('Email:', email, 'Password:', password);
            noty.close();
        }),
        Noty.button('Отмена', 'btn btn-secondary', function (noty) {
            noty.close();
        })
    ]
}).show();

Примечания:

  • Использование trim() убирает лишние пробелы.
  • Валидацию можно расширять через регулярные выражения или кастомные функции.
  • HTML-разметка полностью контролируется разработчиком, что позволяет создавать сложные формы.

Использование событий для интерактивности

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

  • onShow – выполняется при отображении уведомления, удобен для фокусировки на поле ввода.
  • onClose – выполняется при закрытии уведомления.
  • onCloseClick – выполняется при клике на крестик закрытия.

Пример установки фокуса на первый элемент формы:

new Noty({
    text: `<input type="text" id="focusInput" placeholder="Введите текст">`,
    layout: 'topCenter',
    timeout: false,
    buttons: [
        Noty.button('OK', 'btn btn-success', function (noty) { noty.close(); })
    ],
    callbacks: {
        onShow: function () {
            document.getElementById('focusInput').focus();
        }
    }
}).show();

Динамическая форма с выбором опций

Для уведомлений с выбором часто применяют <select> и radio-кнопки. Можно сразу обрабатывать выбор пользователя через callback:

new Noty({
    text: `
        <label>Выберите язык:</label>
        <select id="languageSelect">
            <option value="ru">Русский</option>
            <option value="en">Английский</option>
            <option value="es">Испанский</option>
        </select>
    `,
    layout: 'bottomRight',
    theme: 'relax',
    timeout: false,
    buttons: [
        Noty.button('Сохранить', 'btn btn-info', function (noty) {
            const lang = document.getElementById('languageSelect').value;
            console.log('Выбран язык:', lang);
            noty.close();
        })
    ]
}).show();

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

  • В HTML-контент можно добавлять любые интерактивные элементы.
  • Все действия выполняются через кнопки или события Noty.
  • Такой подход позволяет создавать полноценные диалоговые формы без сторонних модальных окон.

Рекомендации по дизайну и UX

  • Устанавливать timeout: false для форм, чтобы пользователь не потерял введённые данные.
  • Использовать понятные кнопки с текстом действий (Сохранить, Отмена, Подтвердить).
  • Обеспечивать фокусировку на первом поле ввода для удобства.
  • Для сложных форм можно создавать отдельные HTML-шаблоны и вставлять их через innerHTML в text.

Интеграция с AJAX и сервером

Noty-уведомления с формами удобно комбинировать с асинхронными запросами:

Noty.button('Отправить', 'btn btn-success', function (noty) {
    const formData = new FormData(document.getElementById('notyForm'));
    fetch('/submit', { method: 'POST', body: formData })
        .then(response => response.json())
        .then(data => {
            console.log('Ответ сервера:', data);
            noty.close();
        })
        .catch(err => console.error('Ошибка:', err));
});
  • Это позволяет мгновенно отправлять данные без перезагрузки страницы.
  • Уведомление можно закрывать только после успешного ответа от сервера.

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

Оглавление