Yii2 validate an ActiveForm with javascript

Question

I have a working Active Form, which can be submitted, and validated via Yii PHP. However, I would like to determine if the form is valid, when clicking a Next button.

I can pass error messages to the user via this:

$("#form").yiiActiveForm("validate", true);

But this function doesn't return anything; I don't know if there are indeed any errors or not. I tried this:

$error_count = document.getElementsByClassName("help-block").length

but this does not work; the errors are counted before the UI has updated. If I press the button again, a second time, then error_count is what I'd expect.

This doesn't seem to do anything:

$("#form").yiiActiveForm("validate");

I also tried this:

$('#form').on('afterValidate', function (event, messages, errorAttributes) {}

But this is only triggered after the fact so I'm not sure what to do.

Any advice would be appreciated.

Answer 1

If you need to react to button you simply need to combine both events:

let isNextClicked = false;

$('.next-btn').on('click', function(e) {
    e.preventDefault();
    isNextClicked = true;
    $("#form").yiiActiveForm("validate", true);
});

$('#form').on('afterValidate', function(event, messages, errorAttributes) {
    if (!isNextClicked) {
        //validation wasn't triggered by clicking next
        return;
    }

    // reset the state
    isNextClicked = false;

    if (errorAttributes.length > 0) {
        //there are errors so we won't let user to continue
        //we can also show some alert() here
        return;
    }
    
    // ... code to show the next tab of form ...
});