Многошаговая форма с различными типами данных

Cleave.js предоставляет удобный способ форматирования и маскирования пользовательского ввода в реальном времени. При работе с многошаговыми формами важно учитывать, что каждый шаг может содержать различные типы данных: номера телефонов, даты, валюту, номера кредитных карт и текстовые поля с ограничениями. Cleave.js позволяет применять отдельные правила форматирования к каждому полю, обеспечивая консистентность данных и улучшая UX.

Инициализация Cleave.js для отдельных полей

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

// Поле ввода номера телефона
const phoneInput = new Cleave('#phone', {
    phone: true,
    phoneRegionCode: 'RU'
});

// Поле ввода даты
const dateInput = new Cleave('#date', {
    date: true,
    datePattern: ['d', 'm', 'Y']
});

// Поле ввода суммы с разделением тысяч
const amountInput = new Cleave('#amount', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand',
    numeralDecimalMark: ',',
    delimiter: ' '
});

Каждый экземпляр Cleave.js автоматически следит за вводом пользователя и форматирует данные в реальном времени, предотвращая ошибки ввода.

Управление форматированием на разных шагах формы

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

let cleaveInstance;

function activateStep(stepNumber) {
    const stepElement = document.querySelector(`#step${stepNumber}`);
    stepElement.style.display = 'block';

    if (stepNumber === 1) {
        cleaveInstance = new Cleave('#phone', {
            phone: true,
            phoneRegionCode: 'RU'
        });
    }
}

function deactivateStep(stepNumber) {
    const stepElement = document.querySelector(`#step${stepNumber}`);
    stepElement.style.display = 'none';

    if (cleaveInstance) {
        cleaveInstance.destroy();
        cleaveInstance = null;
    }
}

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

Работа с различными типами данных

Телефонные номера: Cleave.js поддерживает маски для международных номеров с автоматическим форматированием и проверкой региона.

Даты: Можно задать шаблон ['d','m','Y'] для формата дд/мм/гггг или любой другой последовательности.

Валюты и числовые значения: Поддерживается разделение тысяч, настройка десятичного разделителя и фиксированное количество десятичных знаков.

Кредитные карты: Cleave.js автоматически распознаёт тип карты и применяет соответствующую маску.

const creditCardInput = new Cleave('#creditCard', {
    creditCard: true,
    onCreditCardTypeChanged: function(type) {
        console.log('Detected card type:', type);
    }
});

Интеграция с валидацией

Cleave.js форматирует данные, но не выполняет валидацию. Для многошаговых форм важно сочетать Cleave.js с проверкой введённых данных:

function validateStep(stepNumber) {
    if (stepNumber === 1) {
        const phone = document.querySelector('#phone').value;
        return phone.length === 16; // Пример проверки длины с маской +7 (999) 999-99-99
    }
    if (stepNumber === 2) {
        const date = document.querySelector('#date').value;
        return /^\d{2}\/\d{2}\/\d{4}$/.test(date);
    }
    return true;
}

Комбинируя Cleave.js с проверкой данных, можно обеспечить корректный ввод на каждом шаге формы и предотвратить ошибки перед отправкой.

Динамическое обновление и смена форматов

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

function switchPhoneRegion(regionCode) {
    const phoneField = document.querySelector('#phone');
    const currentValue = phoneField.value;

    const newCleave = new Cleave(phoneField, {
        phone: true,
        phoneRegionCode: regionCode
    });

    newCleave.setRawValue(currentValue);
}

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

Поддержка placeholder и пользовательских масок

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

const customMaskInput = new Cleave('#custom', {
    delimiters: ['-', '-'],
    blocks: [3, 2, 4],
    uppercase: true
});

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

Рекомендации по производительности

  • Инициализировать Cleave.js только для активных шагов.
  • Уничтожать экземпляры при скрытии шагов.
  • Использовать минимальное количество обработчиков для событий onChange и onInput, особенно если форма содержит десятки полей.
  • Для повторяющихся форм с одинаковым форматом создавать функции-генераторы Cleave.js, чтобы избежать дублирования кода.

Закрепление данных между шагами

Для корректной работы многошаговых форм важно сохранять значения при переходе между шагами. Cleave.js предоставляет метод getRawValue(), который возвращает данные без форматирования:

const rawPhone = phoneInput.getRawValue(); // '+79991234567'

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

Оглавление