Множественный email ввод

Работа с множественным вводом email в Tom Select строится на механике тегов (tagging), где каждое значение рассматривается как отдельная сущность с возможностью создания, удаления и валидации. В контексте email-полей это превращает обычный input в управляемый контейнер адресов, где каждый email становится отдельным токеном.

Основная идея заключается в том, что поле ввода перестаёт хранить одну строку и переходит к массиву значений:

  • каждое значение — отдельный email
  • ввод разделяется по символам-разделителям
  • поддерживается создание элементов “на лету”
  • обеспечивается контроль корректности формата

Инициализация обычно опирается на режим создания новых значений:

new TomSelect("#emails", {
  plugins: ["remove_button"],
  persist: false,
  create: true
});

Ключевой параметр create: true активирует режим добавления произвольных значений, что критично для email-сценариев.

Преобразование input в email-теги

HTML-элемент, предназначенный для множественного ввода, как правило, выглядит как обычный select с возможностью множественного выбора:

<select id="emails" multiple></select>

После инициализации каждый введённый email превращается в отдельный объект выбора. Внутренне библиотека хранит структуру:

[
  { value: "a@mail.com", text: "a@mail.com" },
  { value: "b@mail.com", text: "b@mail.com" }
]

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

Разделители ввода и обработка paste-событий

Для email-форматов критично поддерживать ввод через разделители. На практике используются:

  • запятая
  • пробел
  • Enter
  • вставка из буфера обмена

Конфигурация delimiter задаёт базовый символ разделения:

new TomSelect("#emails", {
  create: true,
  delimiter: ","
});

Однако для email-логики чаще требуется расширенная обработка, включающая разбиение строки по нескольким символам.

При вставке строки:

user1@mail.com, user2@mail.com user3@mail.com

логика должна преобразовать её в набор значений. Это реализуется через createFilter и обработку onPaste.

Валидация email при создании

Ключевой элемент системы — проверка корректности email перед добавлением в список. Стандартный подход — регулярное выражение:

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

Интеграция в конфигурацию:

new TomSelect("#emails", {
  create: (input) => {
    const value = input.trim();
    if (emailRegex.test(value)) {
      return { value, text: value };
    }
    return false;
  }
});

Такой механизм предотвращает попадание некорректных значений в модель данных.

Нормализация данных

При работе с email важно приводить значения к единому формату:

  • приведение к нижнему регистру
  • удаление пробелов
  • исключение дубликатов

Пример нормализации:

create: (input) => {
  const email = input.trim().toLowerCase();

  if (!emailRegex.test(email)) return false;

  return {
    value: email,
    text: email
  };
}

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

Предотвращение дубликатов

Встроенного механизма дедупликации недостаточно, поэтому используется проверка текущего состояния:

create: (input) => {
  const email = input.trim().toLowerCase();

  if (!emailRegex.test(email)) return false;

  if (this.items.includes(email)) return false;

  return { value: email, text: email };
}

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

Работа с вводом через blur

Часто email должен создаваться не только по разделителям, но и при потере фокуса поля:

new TomSelect("#emails", {
  create: true,
  createOnBlur: true
});

Это поведение позволяет завершать ввод без дополнительных действий, что критично для быстрого набора адресов.

Ограничение формата и UX-валидация

Помимо базовой проверки, часто применяется расширенная логика:

  • запрет доменов
  • проверка MX-записей (на сервере)
  • ограничение корпоративных доменов
  • маскирование ошибок ввода

На стороне клиента Tom Select используется как первый слой защиты, а серверная валидация выступает финальным фильтром.

Кастомизация отображения email-тегов

Каждый email может отображаться в виде кастомного тега:

new TomSelect("#emails", {
  render: {
    item: (data, escape) => {
      return `<div class="email-tag">${escape(data.value)}</div>`;
    },
    option: (data, escape) => {
      return `<div>${escape(data.value)}</div>`;
    }
  }
});

Это позволяет добавлять визуальные индикаторы, например:

  • статус верификации
  • доменную подсветку
  • иконки почтовых провайдеров

Асинхронная проверка email

В более сложных сценариях email проверяется через сервер:

create: async (input) => {
  const email = input.trim().toLowerCase();

  const res = await fetch("/api/validate-email", {
    method: "POST",
    body: JSON.stringify({ email })
  });

  const result = await res.json();

  if (!result.valid) return false;

  return { value: email, text: email };
}

Такая модель позволяет учитывать:

  • существование пользователя
  • блокировки
  • корпоративные правила
  • антиспам-фильтры

Управление состоянием поля

Tom Select предоставляет API для программного контроля:

const control = new TomSelect("#emails");

// добавление email
control.addItem("test@mail.com");

// удаление
control.removeItem("test@mail.com");

// очистка
control.clear();

Это используется при:

  • автозаполнении профиля
  • загрузке данных с сервера
  • восстановлении черновиков форм

Массовое добавление email

Для сценариев импорта применяется пакетное добавление:

const emails = "a@mail.com,b@mail.com,c@mail.com"
  .split(",")
  .map(e => e.trim());

emails.forEach(email => {
  if (emailRegex.test(email)) {
    control.addItem(email);
  }
});

Такой подход часто используется при вставке из Excel или CRM-систем.

Ограничение количества значений

Для контроля перегрузки формы вводится лимит:

new TomSelect("#emails", {
  maxItems: 10
});

При достижении лимита добавление новых email блокируется, что важно для:

  • ограничений рассылок
  • UI-оптимизации
  • защиты от случайного ввода больших массивов данных

Интеграция с формами и сериализация

При отправке формы данные автоматически сериализуются:

const data = control.getValue();

Результат — массив email-адресов, готовый для передачи на сервер без дополнительного парсинга.

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

Оглавление