Yii2 - ActiveForm and afterValidate events

Question

I am using ActiveForm with the afterValidate() event, however currently the afterValidate() gets triggered on any validation event. How can I differentiate between the events validateOnSubmit, validateOnBlur and validateOnChange?

Basically, I only want my afterValidate() function to get triggered on submit. Here is my code:

PHP:

<?php $form = ActiveForm::begin([
    'id' => 'register-form',
    'options' => [
        'class' => 'validate-form',
    ],
    'enableClientValidation' => true,
    'enableAjaxValidation' => false,
    'validateOnSubmit' => true,
    'validateOnBlur' => true,
    'validateOnChange' => true,
]); ?>

JS:

// JS afterValidate function
$('.validate-form').on('afterValidate', function (event, messages, errorAttributes) {
    $('.error-popup').show();

    return false;
});

HTML:

<div class="error-popup">Please review the errors in the form below.</div>

As you can see in my afterValidate() function above, an error popup is shown if there are validation errors. However I only want this to error popup to appear if there are any validation errors when the user submits the form.

If there is a validation error on blur/change then the normal inline validation should occur without any error popup.

From my understanding, beforeSubmit event is only triggered when validation has passed.

Answer 1

Yii's active form JS save some info into yiiActiveForm data property. There is submitting property that you can use to determine if the form is in validation before form submission.

$('.validate-form').on('afterValidate', function (event, messages, errorAttributes) {
    let data = $('.validate-form').data('yiiActiveForm');
    //check if we are in submission process and if there are any errors
    if (data.submitting && errorAttributes.length > 0) {
        $('.error-popup').show();
    }
});