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

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

Для этого используем специальный сниппет (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

SQL-инструмент для создания личных кабинетов на сайте

Суть подхода и история создания Falcon Space

Платформа Falcon Space

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

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

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

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

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

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

Веб-приложения на MS SQL. Партнерская программа для разработчиков и веб-студий

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

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