Yii2 client side form validation

Question

I have a Yii2 ActiveFrom.

Replaced the Submit button with

    <button class="btn <?= $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary' ?>"
            onclick="submitit();return false;">
        <?= $model->isNewRecord ? 'Create' : 'Update' ?>
    </button>

because i need to show a modal overlay during the time the page is processing in the background. (Please wait...).

$('#rebates-form').yiiActiveForm('validate')

always returns undefined.

Even if i call

$("#rebates-form").data('yiiActiveForm')

after 'validate' the "validated" element is always false, even if the form don't has validation errors.

$('#rebates-form').yiiActiveForm('submitForm')

always return false, even if form got submitted.

How can i trigger my please wait dialog

$('#pleaseWaitDialog').modal('show');

to show only in the event of sumbiting the from without validation errors?

Answer 1

Following solution is working:

$(document).ready(function () {
    $("#rebates-form").on("beforeSubmit", function (event, messages) {
        $('#pleaseWaitDialog').modal('show');
        return true;
    });
});

function submitit(element) {
    $('#rebates-form').yiiActiveForm('submitForm')
}

Where the extra button witht the submitit function call can also be left out, since the event "beforeSubmit" will trigger anyways.

This event will only be triggered if the form validation was successfull.

(see comment at https://github.com/yiisoft/yii2/blob/master/framework/assets/yii.activeForm.js)