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

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

Для этого используем специальный сниппет (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(btn,step, prevStep){
        var res = $('.as-form-item[data-code=customers] textarea').val()!=="";
            if(!res) as.sys.bootstrapAlert("Укажите описание целевой аудитории",
    {type: 'warning', delay: 6000});
    return res;
}
});

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

В параметрах функции передается кнопка btn, которая вызвала переключение шага, и номер шага step, на который выполняется переключение и номер предыдущего шага prevStep.

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

Примечание:

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