Получение данных из полей

Для работы с iziToast необходимо подключить библиотеку в проект. Обычно это делается через CDN или локальные файлы:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast/dist/css/iziToast.min.css">
<script src="https://cdn.jsdelivr.net/npm/izitoast/dist/js/iziToast.min.js"></script>

После подключения можно создавать уведомления с помощью метода iziToast.show() или специализированных методов iziToast.success(), iziToast.error(), iziToast.info(), iziToast.warning(). Эти методы принимают объект конфигурации с параметрами уведомления.

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

iziToast.success({
    title: 'Успех',
    message: 'Данные успешно получены',
    position: 'topRight'
});

Получение данных из полей формы

Для интеграции iziToast с формами важно сначала корректно извлечь данные из полей. В JavaScript для этого используется метод document.querySelector или document.getElementById. Например:

let username = document.getElementById('username').value;
let email = document.querySelector('input[name="email"]').value;

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

Валидация и уведомления

Часто необходимо уведомлять пользователя о корректности введенных данных. Вариант с проверкой простого условия:

let password = document.getElementById('password').value;

if(password.length < 6) {
    iziToast.error({
        title: 'Ошибка',
        message: 'Пароль должен содержать минимум 6 символов',
        position: 'topRight'
    });
} else {
    iziToast.success({
        title: 'Ок',
        message: 'Пароль корректен',
        position: 'topRight'
    });
}

Особое внимание стоит уделять пустым полям, числовым ограничениям и форматам (например, email). Проверку можно расширить с использованием регулярных выражений:

let email = document.getElementById('email').value;
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if(!emailPattern.test(email)) {
    iziToast.warning({
        title: 'Предупреждение',
        message: 'Введите корректный email',
        position: 'topRight'
    });
}

Сбор нескольких полей

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

let formData = {
    username: document.getElementById('username').value,
    email: document.getElementById('email').value,
    password: document.getElementById('password').value
};

if(formData.username === '' || formData.email === '' || formData.password === '') {
    iziToast.error({
        title: 'Ошибка',
        message: 'Все поля должны быть заполнены',
        position: 'topRight'
    });
} else {
    iziToast.success({
        title: 'Данные приняты',
        message: 'Форма успешно заполнена',
        position: 'topRight'
    });
}

Использование объекта позволяет легко передавать данные в AJAX-запросы или функции обработки на клиенте без дублирования кода.

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

iziToast поддерживает множество опций для кастомизации уведомлений:

  • title – заголовок уведомления.
  • message – основной текст.
  • position – положение на экране (topRight, topLeft, bottomRight, bottomLeft, center).
  • timeout – время отображения в миллисекундах.
  • theme – тема (light, dark).
  • progressBar – включение индикатора времени показа.
  • buttons – добавление интерактивных кнопок внутри уведомления.

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

iziToast.show({
    title: 'Подтверждение',
    message: 'Хотите отправить форму?',
    position: 'topRight',
    timeout: 0,
    close: false,
    buttons: [
        ['<button>Да</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
            console.log('Форма отправлена');
        }],
        ['<button>Нет</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});

Интеграция с событиями формы

Для динамического отображения уведомлений часто используется событие submit формы. Оно позволяет перехватывать отправку, проверять поля и показывать iziToast уведомления без перезагрузки страницы:

document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault();

    let username = document.getElementById('username').value;
    let email = document.getElementById('email').value;

    if(username === '' || email === '') {
        iziToast.error({
            title: 'Ошибка',
            message: 'Заполните все поля',
            position: 'topRight'
        });
        return;
    }

    iziToast.success({
        title: 'Готово',
        message: 'Форма отправлена успешно',
        position: 'topRight'
    });
});

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

Асинхронная обработка данных

Часто после получения данных из полей требуется отправить их на сервер через fetch или axios. iziToast может использоваться для отображения состояния запроса:

fetch('/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
    iziToast.success({
        title: 'Успех',
        message: 'Данные успешно отправлены',
        position: 'topRight'
    });
})
.catch(error => {
    iziToast.error({
        title: 'Ошибка',
        message: 'Не удалось отправить данные',
        position: 'topRight'
    });
});

Такой подход объединяет получение данных из полей, их проверку и уведомления в единый поток обработки формы.

Оглавление