Параметр inputValidator

Библиотека SweetAlert предназначена для создания красивых и настраиваемых окон с уведомлениями, предупреждениями и подтверждениями, используемых в веб-приложениях. Одним из полезных параметров, которые можно использовать в конфигурации модальных окон SweetAlert, является inputValidator. Этот параметр позволяет добавить в окно ввода механизм валидации данных, вводимых пользователем, и гарантирует, что только правильные значения будут отправлены в приложение.

Основное назначение

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

Синтаксис и использование

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

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

Swal.fire({
  title: 'Введите ваш возраст',
  input: 'text',
  inputValidator: (value) => {
    if (!value) {
      return 'Поле не может быть пустым!';
    } else if (isNaN(value) || value < 18) {
      return 'Возраст должен быть числом и не менее 18 лет!';
    }
  }
});

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

Возвращаемые значения

Функция, указанная в inputValidator, должна возвращать:

  1. Строку с ошибкой — если проверка не пройдена, то возвращается строка с текстом ошибки. SweetAlert автоматически отобразит это сообщение рядом с полем ввода.
  2. undefined или null — если валидация прошла успешно, то функция возвращает undefined или null, что указывает на то, что ошибок нет и данные можно отправлять дальше.

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

Типы проверок

inputValidator можно использовать для различных типов проверок:

  1. Проверка на пустоту: Если поле обязательно для заполнения, можно проверить, не оставил ли пользователь его пустым.

    inputValidator: (value) => {
  if (!value) {
    return 'Это обязательное поле';
  }
}

  2. Проверка формата: Можно использовать регулярные выражения для проверки, соответствует ли введённый текст определённому формату.

    inputValidator: (value) => {
  const regex = /^[a-zA-Z]+$/;
  if (!regex.test(value)) {
    return 'Только буквы разрешены';
  }
}

  3. Проверка диапазона значений: Например, для ввода возраста или числовых значений можно установить минимальные и максимальные ограничения.

    inputValidator: (value) => {
  const num = Number(value);
  if (isNaN(num) || num < 1 || num > 100) {
    return 'Введите число от 1 до 100';
  }
}

  4. Проверка электронной почты: Для проверки правильности введённого адреса электронной почты можно использовать регулярные выражения, которые гарантируют корректность ввода.

    inputValidator: (value) => {
  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  if (!emailRegex.test(value)) {
    return 'Введите правильный email';
  }
}

Комбинирование с другими параметрами

Можно комбинировать inputValidator с другими параметрами модальных окон для создания более сложных взаимодействий. Например, с параметром input можно использовать не только текстовое поле, но и другие элементы ввода, такие как выбор даты, чекбоксы и радиокнопки.

Swal.fire({
  title: 'Введите вашу дату рождения',
  input: 'date',
  inputValidator: (value) => {
    if (!value) {
      return 'Дата не может быть пустой';
    }
  }
});

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

Обработка ошибок

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

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

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

Swal.fire({
  title: 'Введите сумму',
  input: 'number',
  inputValidator: (value) => {
    if (!value) {
      return 'Поле не может быть пустым';
    } else if (isNaN(value)) {
      return 'Введите число';
    } else if (value < 100) {
      return 'Сумма должна быть больше или равна 100';
    }
  }
});

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

Заключение

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

Оглавление