JSFiddle - React, Tailwind, and code Playground

by Naeel Maqsudov

HTML

<p>что-то до формы</p>
<form id='multiform1'>
    <fieldset>
        <label>Поле1: <input type="text" name="fld1"/></label><br/>
        <label>Поле2: <input type="text" name="fld2"/></label><br/>
        <label>Поле3: <input type="text" name="fld3"/></label><br/>
    </fieldset>
    <fieldset>
        <label>Поле4: <input type="text" name="fld4"/></label><br/>
        <label>Поле5: <input type="text" name="fld5"/></label><br/>
        <label>Поле6: <input type="text" name="fld6"/></label><br/>
    </fieldset>
    <fieldset>
        <label>Поле7: <input type="text" name="fld7" aria-invalid="true"/></label><br/>
        <label>Поле8: <input type="text" name="fld8"/></label><br/>
        <label>Поле9: <input type="text" name="fld9"/></label><br/>
    </fieldset>
</form>
<p>что-то после формы</p>

CSS

#multiform1 fieldset{
    display:none;
}
input[aria-invalid]{
    background-color:#FAA;
}

JavaScript

//инициализация формы
initpages('#multiform1');
//раздача валидаторов, срабатывающих на потерю фокуса текстовых полей
$('#multiform1 input[type="text"]').blur(function(){checkfield($(this));});

//проверка валидности страницы
function fieldsetvalid(fldset){
    fldset.find('input').each(function(i,e){$(e).blur();});
    var errnum = fldset.find('input[aria-invalid]').length;
    if (errnum == 0) {
        return true;
    }else{
        alert('Найдено ошибок: ' + errnum + '. Исправьте для перехода к следующему шагу');
        return false;
    }
}
//инициализация формы
function initpages(id){
    var pgs = $(id + '  fieldset');
    pgs.each(function(i,e){
        if (i == 0) $(e).show();
        $(e).append(
            (i == pgs.length-1)?
            $('<input type="submit" value="Рассчитать">').click(function(){
                //это функция отправки формы
                if(fieldsetvalid($(this).parents('fieldset'))){
                    alert($(this).parents('form').serialize());
                    return true;
                }else{
                    return false;
                }
            })
            :
            $('<input type="button" value="Далее">').click(function(){
                //а это функция перехода к следующей странице
                if(fieldsetvalid($(this).parents('fieldset'))){
                    $(this).parents('fieldset').hide().next().show()
                    .find('input:first').focus();
                }
            })
        );
        //if (i < pgs.length()-1)
    });
    $(pgs[0]).show().find('input:first').focus();
}
//валидатор при покидании поля
function checkfield(input){
    if(input.attr('name') == input.val()){
        input.removeAttr('aria-invalid');
        return true;
    }else{
        input.attr('aria-invalid','true');
        return false;
    }
}