Валидация новых элементов

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

Создание нового элемента выполняется через функцию create, которая может возвращать объект с полями value и text, либо false для отклонения создания элемента. Основная логика валидации заключается в проверке введённого значения до его добавления в список.

new TomSelect("#example-select", {
    create: function(input) {
        if (!input || input.length < 3) {
            return false; // запрет на пустые и слишком короткие значения
        }
        return { value: input, text: input };
    }
});

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

Чтобы избежать добавления повторяющихся элементов, необходимо проверять текущее состояние селекта перед созданием нового значения. Tom Select предоставляет массив options, содержащий все доступные элементы, что позволяет выполнять поиск по ключу value.

new TomSelect("#example-select", {
    create: function(input) {
        const exists = this.options.hasOwnProperty(input);
        if (exists) return false; // запрещаем дубликаты
        return { value: input, text: input };
    }
});

В этом примере метод hasOwnProperty используется для быстрого определения существующего значения в объекте options, что обеспечивает высокую производительность даже при большом количестве элементов.

Пользовательская валидация формата

Помимо проверки на дубликаты, часто требуется валидировать формат нового элемента, например, при вводе электронной почты, URL или телефонного номера. В этом случае можно использовать регулярные выражения или сторонние функции проверки.

new TomSelect("#email-select", {
    create: function(input) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(input)) return false; // запрещаем некорректный формат
        if (this.options.hasOwnProperty(input)) return false; // проверка на дубликат
        return { value: input, text: input };
    }
});

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

Интеграция с асинхронными проверками

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

new TomSelect("#username-select", {
    create: function(input) {
        return fetch(`/validate-username?name=${encodeURIComponent(input)}`)
            .then(response => response.json())
            .then(data => {
                if (data.available) {
                    return { value: input, text: input };
                } else {
                    return false; // имя занято
                }
            });
    }
});

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

Ограничение по количеству новых элементов

Tom Select позволяет ограничивать количество создаваемых элементов. Это полезно, когда пользовательский ввод должен оставаться в рамках заданных ограничений.

new TomSelect("#tag-select", {
    create: true,
    maxItems: 5,
    createFilter: function(input) {
        if (this.items.length >= this.settings.maxItems) return false;
        return true;
    }
});

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

Комбинирование правил валидации

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

new TomSelect("#complex-select", {
    create: function(input) {
        if (!input.trim()) return false;
        if (this.options.hasOwnProperty(input)) return false;
        const pattern = /^[a-zA-Z0-9_-]+$/;
        if (!pattern.test(input)) return false;

        return fetch(`/check-value?val=${encodeURIComponent(input)}`)
            .then(r => r.json())
            .then(data => data.valid ? { value: input, text: input } : false);
    }
});

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

Оглавление