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

Асинхронная валидация с использованием SweetAlert

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

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

Для реализации асинхронной валидации часто используются два основных метода библиотеки: swal() и Swal.fire(). Эти методы поддерживают работу с промисами, что делает их идеальными для асинхронных операций.

Использование Swal.fire() для асинхронной валидации

Метод Swal.fire() является наиболее часто используемым и представляет собой улучшенную версию swal(). Он принимает объект с настройками, что позволяет легко кастомизировать внешний вид и поведение окна.

Swal.fire({
  title: 'Проверка данных...',
  text: 'Пожалуйста, подождите...',
  didOpen: () => {
    Swal.showLoading(); // Показываем индикатор загрузки
  }
}).then(async () => {
  try {
    // Выполнение асинхронной операции, например, запрос на сервер
    const response = await fetch('/validate', {
      method: 'POST',
      body: JSON.stringify({ value: 'test' }),
      headers: { 'Content-Type': 'application/json' }
    });
    const data = await response.json();

    // Валидация ответа
    if (data.isValid) {
      Swal.fire('Данные верны!', '', 'success');
    } else {
      Swal.fire('Ошибка!', 'Данные не прошли валидацию', 'error');
    }
  } catch (error) {
    Swal.fire('Ошибка!', 'Не удалось выполнить проверку', 'error');
  }
});

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

Обработка ошибок при асинхронной валидации

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

В случае неудачной валидации или ошибки при запросе, окно SweetAlert можно настроить таким образом, чтобы оно показало пользователю подробное сообщение.

Swal.fire({
  title: 'Проверка...',
  text: 'Пожалуйста, подождите, идет проверка ваших данных...',
  didOpen: () => {
    Swal.showLoading();
  }
}).then(async () => {
  try {
    const result = await someAsyncValidationFunction();

    if (!result.success) {
      throw new Error(result.message); // В случае ошибки выбрасываем исключение
    }

    Swal.fire('Валидация пройдена', '', 'success');
  } catch (error) {
    Swal.fire({
      title: 'Ошибка!',
      text: error.message || 'Произошла ошибка при валидации.',
      icon: 'error'
    });
  }
});

В этом примере, если асинхронная функция someAsyncValidationFunction возвращает ошибку, выбрасывается исключение, и пользователь получает уведомление с соответствующим сообщением об ошибке.

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

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

document.querySelector('form').addEventListener('submit', async (event) => {
  event.preventDefault(); // Останавливаем отправку формы

  // Валидация полей формы
  const email = document.querySelector('#email').value;
  const password = document.querySelector('#password').value;

  if (!email || !password) {
    return Swal.fire('Ошибка!', 'Все поля должны быть заполнены!', 'error');
  }

  try {
    const emailCheck = await checkEmailAvailability(email);

    if (!emailCheck.isAvailable) {
      return Swal.fire('Ошибка!', 'Этот email уже зарегистрирован.', 'error');
    }

    Swal.fire('Форма прошла валидацию!', '', 'success');
    // Отправка формы или дальнейшая обработка
  } catch (error) {
    Swal.fire('Ошибка!', 'Произошла ошибка при валидации. Попробуйте позже.', 'error');
  }
});

В данном примере для валидации используется функция checkEmailAvailability, которая асинхронно проверяет, доступен ли email. Если email уже зарегистрирован, пользователю выводится соответствующее сообщение об ошибке.

Усовершенствование с добавлением пользовательских действий

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

Swal.fire({
  title: 'Подтвердите действие',
  text: 'Вы уверены, что хотите отправить данные?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Отмена'
}).then(async (result) => {
  if (result.isConfirmed) {
    try {
      const response = await submitData();
      Swal.fire('Данные отправлены!', '', 'success');
    } catch (error) {
      Swal.fire('Ошибка!', 'Не удалось отправить данные. Попробуйте снова.', 'error');
    }
  } else {
    Swal.fire('Отменено', 'Данные не были отправлены.', 'info');
  }
});

В этом примере, перед отправкой данных пользователю показывается окно с кнопками для подтверждения или отмены. В зависимости от выбора пользователя выполняется или отменяется асинхронное действие.

Параллельная асинхронная валидация

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

Swal.fire({
  title: 'Проверка данных...',
  text: 'Пожалуйста, подождите...',
  didOpen: () => {
    Swal.showLoading();
  }
}).then(async () => {
  try {
    const [emailCheck, usernameCheck] = await Promise.all([
      checkEmailAvailability('user@example.com'),
      checkUsernameAvailability('user123')
    ]);

    if (!emailCheck.isAvailable) {
      throw new Error('Email уже занят');
    }

    if (!usernameCheck.isAvailable) {
      throw new Error('Имя пользователя занято');
    }

    Swal.fire('Все проверки пройдены!', '', 'success');
  } catch (error) {
    Swal.fire('Ошибка!', error.message, 'error');
  }
});

Этот пример показывает, как параллельно выполняются две асинхронные проверки, что сокращает время ожидания пользователя.

Заключение

Асинхронная валидация с использованием SweetAlert позволяет интегрировать сложные логики в пользовательские интерфейсы. С помощью возможностей работы с промисами и асинхронными функциями можно создавать эффективные и интуитивно понятные решения для валидации данных.