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

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

iziToast.show({
    title: 'Ошибка',
    message: 'Поле "Email" заполнено некорректно',
    color: 'red',
    position: 'topRight',
    timeout: 5000,
    progressBar: true
});

В этом примере ключевые параметры:

  • title — заголовок уведомления, кратко информирующий о событии.
  • message — подробное описание ошибки или статуса.
  • color — цветовая индикация (красный для ошибок, зелёный для успеха, синий для информации).
  • position — расположение на экране (topRight, bottomLeft, center, и т.д.).
  • timeout — время автоматического исчезновения уведомления.
  • progressBar — отображение индикатора времени жизни уведомления.

Использование iziToast с формами

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

  1. Подчёркивают критические ошибки.
  2. Сообщают о частичных успехах.
  3. Не блокируют работу пользователя.

Пример интеграции с проверкой формы:

document.getElementById('submitBtn').addEventListener('click', function() {
    let email = document.getElementById('email').value;
    let password = document.getElementById('password').value;

    if (!email.includes('@')) {
        iziToast.error({
            title: 'Ошибка',
            message: 'Введите корректный email',
            position: 'topRight'
        });
    } else if (password.length < 6) {
        iziToast.warning({
            title: 'Внимание',
            message: 'Пароль должен содержать не менее 6 символов',
            position: 'topRight'
        });
    } else {
        iziToast.success({
            title: 'Успех',
            message: 'Форма успешно отправлена',
            position: 'topRight'
        });
    }
});

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

  • iziToast.error — готовый метод для ошибок.
  • iziToast.warning — для предупреждений и частичных ошибок.
  • iziToast.success — для успешных действий.
  • Использование отдельных методов упрощает визуальное восприятие и логическую структуру кода.

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

iziToast позволяет глубоко настраивать уведомления:

  • icon — задаёт иконку, например icon: 'fa fa-exclamation-circle'.
  • theme — выбор темы light или dark.
  • transitionIn/transitionOut — анимация появления и исчезновения (fadeInDown, fadeOutUp и др.).
  • layout — выбор схемы расположения элементов (1 — стандартная, 2 — для длинных сообщений).

Пример с кастомной анимацией и иконкой:

iziToast.show({
    title: 'Ошибка валидации',
    message: 'Поле "Имя" не должно быть пустым',
    icon: 'fa fa-user-times',
    color: 'red',
    theme: 'dark',
    position: 'topRight',
    timeout: 4000,
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp',
    progressBarColor: '#ff0000'
});

Работа с массивом ошибок

Часто формы содержат несколько полей, которые необходимо проверять одновременно. Удобно выводить все ошибки через цикл:

let errors = [];

if (!email.includes('@')) errors.push('Email введён некорректно');
if (password.length < 6) errors.push('Пароль слишком короткий');
if (username.trim() === '') errors.push('Имя пользователя не может быть пустым');

errors.forEach(error => {
    iziToast.error({
        title: 'Ошибка',
        message: error,
        position: 'topRight',
        timeout: 5000
    });
});

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

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

При проверке данных на сервере (например, уникальность email) можно использовать fetch или axios:

async function validateEmail(email) {
    try {
        let response = await fetch(`/check-email?email=${email}`);
        let data = await response.json();
        if (!data.available) {
            iziToast.error({
                title: 'Ошибка',
                message: 'Email уже занят',
                position: 'topRight'
            });
        } else {
            iziToast.success({
                title: 'Email доступен',
                message: 'Можно использовать этот email',
                position: 'topRight'
            });
        }
    } catch (err) {
        iziToast.error({
            title: 'Ошибка сервера',
            message: 'Не удалось проверить email',
            position: 'topRight'
        });
    }
}

Такой подход помогает сочетать клиентскую и серверную валидацию с единым стилем уведомлений.

Советы по улучшению UX при валидации

  • Не перегружать пользователя множеством уведомлений одновременно. Можно группировать сообщения или выводить их последовательно.
  • Использовать timeout короткой длительности для не критических ошибок и более длинной для важной информации.
  • Применять progressBarColor для визуального акцента на срочности ошибки.
  • Сохранять единый стиль цветов и анимаций во всём приложении для согласованности интерфейса.

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

Оглавление