Формы. Как сделать форму в виде мастера шагов

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

Для этого используем специальный сниппет (as-form-master) в кастомной разметке формы.

<div class="as-form-master hide">
    <div class="as-form-masterProgress"></div>
    <div class="as-form-step" data-step="1" data-title="Шаг 1" data-icon="fa-user">
        <h1>Text 1</h1>

        <a href="#" class="as-form-stepPrev btn btn-outline-primary"><i class="fa fa-chevron-left"></i></a>
        <a href="#" class="as-form-stepNext btn btn-outline-primary"><i class="fa fa-chevron-right"></i></a>
    </div>
    <div class="as-form-step" data-step="2" data-title="Шаг 2" data-icon="fa-edit">
        <h1>Text 2</h1>

        <a href="#" class="as-form-stepPrev btn btn-outline-primary"><i class="fa fa-chevron-left"></i></a>
        <a href="#" class="as-form-stepNext btn btn-outline-primary"><i class="fa fa-chevron-right"></i></a>
    </div>
    <div class="as-form-step" data-step="3" data-title="Шаг 3" data-icon="fa-file">
        <h1>Text 3</h1>
        <a href="#" class="as-form-stepPrev btn btn-outline-primary"><i class="fa fa-chevron-left"></i></a>
        <a href="#" class="as-form-stepNext btn btn-outline-primary"><i class="fa fa-chevron-right"></i></a>
    </div>
</div>

Для проверки шагов используем специальный коллбек на странице:

$(function(){
    as.form.callbacks['newConcept_checkStep1'] = function(){
        var res = $('.as-form-item[data-code=customers] textarea').val()!=="";
            if(!res) as.sys.bootstrapAlert("Укажите описание целевой аудитории",
    {type: 'warning', delay: 6000});
    return res;
}
});

Имя коллбека - {formCode}_checkStep{stepNum}

Если возвращает true - то пропускает к следующему шагу. Если false - то не дает перейти на другой шаг мастера.

Примечание:

  1. Вы можете убрать на 1 шаге кнопку Назад и на последнем шаге кнопку Вперед заменить на кнопку сохранения формы {form-button} и {button-result}.

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства

Бесплатное обучение разработке на Falcon Space

Вы можете разрабатывать самостоятельно или сотрудничать с нами в плане веб-разработки на платформе Falcon Space.
Примечание

Google поиск по нашей документации