Поля email

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

Создание поля для email

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

Swal.fire({
  title: 'Введите свой email',
  input: 'email',
  inputPlaceholder: 'email@example.com',
  showCancelButton: true,
  confirmButtonText: 'Отправить',
  cancelButtonText: 'Отмена',
})

В этом примере создается всплывающее окно с полем для ввода email. Ключевые параметры:

  • input: 'email' указывает, что поле ввода должно быть для email. SweetAlert автоматически применяет валидацию для email.
  • inputPlaceholder: 'email@example.com' задает текст-подсказку внутри поля.
  • showCancelButton: true добавляет кнопку для отмены действия.
  • confirmButtonText: 'Отправить' изменяет текст на кнопке подтверждения.
  • cancelButtonText: 'Отмена' изменяет текст на кнопке отмены.

Валидация введенного email

SweetAlert выполняет базовую валидацию email, проверяя правильность ввода на уровне формата (например, наличие символа @ и доменного суффикса). Если введенный адрес не соответствует формату, окно будет оставаться открытым до тех пор, пока пользователь не введет корректный email.

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

Пример обработки результата ввода:

Swal.fire({
  title: 'Введите свой email',
  input: 'email',
  inputPlaceholder: 'email@example.com',
  showCancelButton: true,
  confirmButtonText: 'Отправить',
  cancelButtonText: 'Отмена',
}).then((result) => {
  if (result.isConfirmed) {
    let email = result.value;
    console.log('Введенный email:', email);
  }
})

В этом примере после нажатия кнопки “Отправить” извлекается введенный email через result.value, и далее его можно обработать, например, отправить на сервер.

Настройки и стилизация

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

Пример стилизации:

Swal.fire({
  title: 'Введите свой email',
  input: 'email',
  inputPlaceholder: 'email@example.com',
  customClass: {
    input: 'my-custom-input',
    container: 'my-custom-container',
  },
  showCancelButton: true,
  confirmButtonText: 'Отправить',
  cancelButtonText: 'Отмена',
})

В этом примере применяется два класса — один для поля ввода, другой для контейнера окна. Эти классы можно стилизовать с помощью CSS.

.my-custom-input {
  border-radius: 10px;
  border: 2px solid #ccc;
  padding: 10px;
}

.my-custom-container {
  background-color: #f4f4f9;
  padding: 20px;
  border-radius: 15px;
}

Обработка ошибок и дополнительных проверок

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

Пример добавления пользовательской валидации:

Swal.fire({
  title: 'Введите свой email',
  input: 'email',
  inputPlaceholder: 'email@example.com',
  showCancelButton: true,
  confirmButtonText: 'Отправить',
  cancelButtonText: 'Отмена',
  preConfirm: (email) => {
    if (!email || email.indexOf('@') === -1) {
      Swal.showValidationMessage('Пожалуйста, введите корректный email');
      return false;
    }
    return email;
  }
})

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

Совмещение с другими типами ввода

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

Пример комбинированной формы:

Swal.fire({
  title: 'Регистрация',
  html: `
    <input type="text" id="name" class="swal2-input" placeholder="Ваше имя">
    <input type="email" id="email" class="swal2-input" placeholder="email@example.com">
  `,
  focusConfirm: false,
  preConfirm: () => {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    if (!name || !email) {
      Swal.showValidationMessage('Пожалуйста, заполните все поля');
      return false;
    }
    return { name: name, email: email };
  }
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Имя:', result.value.name);
    console.log('Email:', result.value.email);
  }
})

Здесь создается форма с двумя полями — для имени и email. Логика проверки и отправки данных работает аналогично предыдущим примерам, только теперь происходит проверка сразу нескольких полей.

Заключение

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

Оглавление