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

Tingle.js — это легковесная и гибкая библиотека для создания модальных окон, которая предоставляет пользователю простые способы реализации интерактивных элементов на веб-странице. Хотя основная цель библиотеки — работать с модальными окнами, её возможности также могут быть полезны для реализации валидации данных в контексте пользовательского ввода.

Подготовка данных

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

Механизм работы с валидацией

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

Пример использования:

var modal = new tingle.modal({
  footer: true,
  stickyFooter: true,
  closeLabel: "Закрыть"
});

// Проверка email
function validateEmail(email) {
  var re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  return re.test(email);
}

// Валидация формы
document.querySelector('#form').addEventListener('submit', function (e) {
  e.preventDefault();
  var email = document.querySelector('#email').value;

  if (!validateEmail(email)) {
    modal.setContent('<h2>Ошибка ввода</h2><p>Неверный формат адреса электронной почты.</p>');
    modal.open();
  } else {
    modal.setContent('<h2>Успех</h2><p>Адрес электронной почты введён корректно.</p>');
    modal.open();
  }
});

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

Удобство использования и кастомизация

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

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

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

var modal = new tingle.modal({
  footer: true,
  stickyFooter: true,
  closeLabel: "Закрыть",
  onClose: function () {
    document.querySelector('#email').value = '';  // Очистка поля при закрытии модала
  }
});

modal.setContent(`
  <h2>Ошибка ввода</h2>
  <p>Неверный адрес электронной почты.</p>
  <input type="text" id="new-email" placeholder="Введите корректный email">
  <button id="retry">Попробовать снова</button>
`);

document.querySelector('#retry').addEventListener('click', function () {
  var newEmail = document.querySelector('#new-email').value;
  
  if (validateEmail(newEmail)) {
    modal.setContent('<h2>Успех</h2><p>Адрес электронной почты введён корректно.</p>');
  } else {
    modal.setContent('<h2>Ошибка ввода</h2><p>Неверный формат адреса электронной почты.</p>');
  }
});
modal.open();

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

Интеграция с существующими формами

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

Пример интеграции с более сложной формой:

document.querySelector('#submit-form').addEventListener('click', function (e) {
  e.preventDefault();
  var formData = new FormData(document.querySelector('#user-form'));
  var email = formData.get('email');
  var password = formData.get('password');
  
  if (!validateEmail(email)) {
    modal.setContent('<h2>Ошибка</h2><p>Адрес электронной почты некорректен.</p>');
    modal.open();
  } else if (password.length < 8) {
    modal.setContent('<h2>Ошибка</h2><p>Пароль слишком короткий. Минимум 8 символов.</p>');
    modal.open();
  } else {
    // Форма отправлена успешно
    modal.setContent('<h2>Успех</h2><p>Данные отправлены успешно.</p>');
    modal.open();
  }
});

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

Заключение

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