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

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

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

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

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

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

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

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

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

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.