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

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

Для этого используем специальный сниппет (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 - функциальная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

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

Falcon Space

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

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

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

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

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