Валидация форм

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

Создание формы с валидацией

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

<form id="myForm">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <span id="emailError" style="color:red; display:none;">Некорректный email</span><br>

  <label for="password">Пароль:</label>
  <input type="password" id="password" name="password">
  <span id="passwordError" style="color:red; display:none;">Пароль должен содержать минимум 8 символов</span><br>

  <button type="submit">Отправить</button>
</form>

Подключение библиотеки Vex

Для использования Vex в проекте нужно сначала подключить библиотеку. Она может быть добавлена с помощью CDN или установлена через пакетный менеджер, например, NPM.

<!-- Подключение через CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vex-js/dist/css/vex.css" />
<script src="https://cdn.jsdelivr.net/npm/vex-js/dist/js/vex.combined.min.js"></script>

Или через NPM:

npm install vex-js

После этого необходимо инициализировать библиотеку в вашем JavaScript-коде.

vex.defaultOptions.className = 'vex-theme-default'; // Выбор темы для всплывающих окон

Валидация поля email

Для валидации email необходимо удостовериться, что введённый адрес соответствует стандартному формату email. Библиотека Vex может быть использована для отображения ошибок в реальном времени.

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Предотвращаем отправку формы

  const emailInput = document.getElementById('email');
  const emailError = document.getElementById('emailError');
  
  // Проверка корректности email
  const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  if (!emailPattern.test(emailInput.value)) {
    // Отображаем ошибку с помощью Vex
    vex.dialog.alert({
      message: 'Некорректный email адрес!',
      className: 'vex-theme-default'
    });
    emailError.style.display = 'inline'; // Показываем текст ошибки
  } else {
    emailError.style.display = 'none'; // Скрываем ошибку
  }
});

Валидация пароля

Пароль должен удовлетворять минимальным требованиям безопасности. В этом примере пароль должен содержать хотя бы 8 символов.

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Предотвращаем отправку формы

  const passwordInput = document.getElementById('password');
  const passwordError = document.getElementById('passwordError');

  // Проверка длины пароля
  if (passwordInput.value.length < 8) {
    // Отображаем ошибку с помощью Vex
    vex.dialog.alert({
      message: 'Пароль должен содержать минимум 8 символов!',
      className: 'vex-theme-default'
    });
    passwordError.style.display = 'inline'; // Показываем текст ошибки
  } else {
    passwordError.style.display = 'none'; // Скрываем ошибку
  }
});

Валидация нескольких полей

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

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Предотвращаем отправку формы

  const emailInput = document.getElementById('email');
  const passwordInput = document.getElementById('password');
  const emailError = document.getElementById('emailError');
  const passwordError = document.getElementById('passwordError');

  let isValid = true;

  // Валидация email
  const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  if (!emailPattern.test(emailInput.value)) {
    vex.dialog.alert({
      message: 'Некорректный email адрес!',
      className: 'vex-theme-default'
    });
    emailError.style.display = 'inline';
    isValid = false;
  } else {
    emailError.style.display = 'none';
  }

  // Валидация пароля
  if (passwordInput.value.length < 8) {
    vex.dialog.alert({
      message: 'Пароль должен содержать минимум 8 символов!',
      className: 'vex-theme-default'
    });
    passwordError.style.display = 'inline';
    isValid = false;
  } else {
    passwordError.style.display = 'none';
  }

  // Отправка формы, если все поля валидны
  if (isValid) {
    this.submit();
  }
});

Валидация с использованием Vex для пользовательского интерфейса

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

vex.dialog.alert({
  message: 'Пожалуйста, исправьте ошибки в форме.',
  className: 'vex-theme-default',
  overlayClosesOnClick: false // Не закрывать окно при клике вне него
});

Подсказки и дополнительные проверки

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

const emailInput = document.getElementById('email');
emailInput.addEventListener('focus', function() {
  vex.dialog.alert({
    message: 'Введите корректный адрес электронной почты (например, example@domain.com).',
    className: 'vex-theme-default'
  });
});

Заключение

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

Оглавление