Active Form, step-by-step filling, how to track errors?

Question

JavaScript

Good afternoon colleagues. I make a step-by-step payment form. Made as follows. There is one large form model, I will not show it. everything is the same as in the usual.
But with types of difficulty, I’m not strong in JS, so I decided to break the steps just with tabs, maybe it’s even worth making tabs from Bootstrap. The catch is that if errors occur on the second and next step, it throws me 1 step and I need to click until the moment where these errors are written.
Actually, I just want to track the errors, and transfer to the desired step. But I have an ActiveForm and fields, respectively, of this kind

<?= $form->field($model, 'phone')->textInput(['class' => 'p-phone'])->label(false) ?>

Naturally, they generate the cherished three fields at the output Label (not in my case), input, error message.
how to track the error of a specific field?
Well, in general, can anyone have an example of a step-by-step form in Yii2? At the beginning, I read a lot of guides from the first juia and most of them were done in sessions, I thought for myself as an option, make several forms, and break it into steps in the controller - but with this approach, there is no way to go back. the form is validated.
The step switch is done like this. He does not pretend to be cool, but counter-offers are encouraged))

$(document).ready(init);
function init(){
    $('.twoStep').hide();
}

function hidePayCard(){
    $('.payment').hide();
    $('.twoStep').show();
}

function showPayCard(){
    $('.payment').show();
    $('.twoStep').hide();
}

Answer 1

my advice to you is not to reinvent the wheel, there are many extensions to solve this problem
https://www.google.com.ua/search?q=step+wizard+yii...