Обработка некорректного ввода

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

Основы работы с SweetAlert

SweetAlert позволяет создавать кастомизированные диалоговые окна с различными типами уведомлений, включая предупреждения, ошибки, подтверждения и другие. В стандартном случае, для создания модального окна с ошибкой, достаточно вызвать функцию Swal.fire() и передать в неё соответствующие параметры.

Swal.fire({
  title: 'Ошибка!',
  text: 'Введите корректные данные.',
  icon: 'error',
  confirmButtonText: 'Попробовать снова'
});

Этот код отображает окно с ошибкой, информируя пользователя о некорректном вводе. Параметр icon задаёт иконку для уведомления, а confirmButtonText позволяет изменить текст кнопки для повторной попытки.

Реакция на некорректный ввод

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

document.querySelector('#form').addEventListener('submit', function(event) {
  event.preventDefault();
  let inputValue = document.querySelector('#inputField').value;

  if (!isValid(inputValue)) {
    Swal.fire({
      title: 'Ошибка!',
      text: 'Введённый адрес электронной почты некорректен.',
      icon: 'error',
      confirmButtonText: 'Попробовать снова'
    });
  } else {
    // отправка формы или выполнение других действий
  }
});

Здесь функция isValid() проверяет корректность введённого значения. В случае ошибки выводится сообщение с подсказкой, что ввод неправильный.

Подсказки и уточнения

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

Swal.fire({
  title: 'Ошибка!',
  html: 'Введённый номер телефона некорректен. Убедитесь, что он состоит из 10 цифр.',
  icon: 'error',
  confirmButtonText: 'Попробовать снова',
  footer: '<a href="#">Что это за ошибка?</a>'
});

Параметр html позволяет использовать HTML-контент внутри окна, что даёт возможность вставить дополнительные элементы, такие как ссылки, изображения и прочее. В данном примере ссылка внизу позволяет пользователю получить дополнительные сведения о том, как правильно вводить номер телефона.

Использование поля ввода в диалогах

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

Swal.fire({
  title: 'Введите свой номер телефона',
  input: 'text',
  inputValue: '',
  inputPlaceholder: 'Номер телефона',
  showCancelButton: true,
  confirmButtonText: 'Подтвердить',
  cancelButtonText: 'Отмена',
  inputValidator: (value) => {
    if (!value || !/^\d{10}$/.test(value)) {
      return 'Номер телефона должен содержать 10 цифр.';
    }
  }
});

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

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

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

fetch('/api/submit', {
  method: 'POST',
  body: JSON.stringify({ phone: inputValue }),
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      Swal.fire('Данные успешно отправлены!');
    } else {
      Swal.fire({
        title: 'Ошибка!',
        text: data.errorMessage,
        icon: 'error',
        confirmButtonText: 'Попробовать снова'
      });
    }
  })
  .catch(error => {
    Swal.fire({
      title: 'Ошибка!',
      text: 'Произошла ошибка при отправке данных. Пожалуйста, попробуйте позже.',
      icon: 'error',
      confirmButtonText: 'Закрыть'
    });
  });

В этом примере используется fetch() для отправки данных на сервер. В случае ошибки с сервера выводится сообщение об ошибке с помощью SweetAlert. Это позволяет создать полный процесс валидации данных с обеих сторон.

Продвинутые возможности

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

Для временной задержки можно использовать параметр timer, который позволяет автоматически закрывать окно после заданного времени.

Swal.fire({
  title: 'Ошибка!',
  text: 'Неправильный формат данных.',
  icon: 'error',
  timer: 2000, // окно закроется через 2 секунды
  showConfirmButton: false
});

Для создания сложных форм можно использовать параметр input, который позволяет работать с различными типами ввода (например, текст, пароль, email и др.).

Swal.fire({
  title: 'Пожалуйста, введите свой email:',
  input: 'email',
  inputPlaceholder: 'example@example.com',
  showCancelButton: true,
  confirmButtonText: 'Отправить'
});

Кроме того, SweetAlert позволяет добавлять кастомные элементы в окно, что даёт ещё больше возможностей для динамического взаимодействия с пользователем.

Заключение

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