Yii2 ActiveForm 提交前显示 loading 状态 - 十七度

想要实现在点击提交按钮前，显示 loading 提示，代码如下

$('#article-form').on('ajaxBeforeSend', function (event) {
    // ajax提交前做的事情
    $("button[name=submit-button]").attr('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...');
}).on('ajaxComplete', function (event, jqXHR, textStatus) {
    // ajax完成后做的事情
});

但是这么写你会发现，这两个回调都不会执行，只会执行 beforeSubmit 回调，查看 yii.activeForm.js 源码

if (needAjaxValidation && ($.isEmptyObject(messages) || data.submitting)) {
    var $button = data.submitObject,
            extData = '&' + data.settings.ajaxParam + '=' + $form.attr('id');
    if ($button && $button.length && $button.attr('name')) {
            extData += '&' + $button.attr('name') + '=' + $button.attr('value');
    }
    $.ajax({
            url: data.settings.validationUrl,
            type: $form.attr('method'),
            data: $form.serialize() + extData,
            dataType: data.settings.ajaxDataType,
            complete: function (jqXHR, textStatus) {
                    $form.trigger(events.ajaxComplete, [jqXHR, textStatus]);
            },
            beforeSend: function (jqXHR, settings) {
                    $form.trigger(events.ajaxBeforeSend, [jqXHR, settings]);
            },
            ...

会发现需要 needAjaxValidation 为 true 才会触发 ajaxComplete、ajaxBeforeSend 这两个回调。所以，在你的表单中，需要加上这个 enableAjaxValidation 参数，才能使 needAjaxValidation 为 true

<?php $form = ActiveForm::begin(['id' => 'article-form', 'enableAjaxValidation' => true]); ?>

但是加上这个参数之后，你会发现，在你的鼠标失去焦点后，表单会自动提交，因为还有一个参数 validationUrl 我们没有提供，如果不提供这个参数，那么他的默认值是当前的 url，所以最终我们需要这样写

<?php $form = ActiveForm::begin(['id' => 'article-form', 'enableAjaxValidation' => true, 'validationUrl' => 'validate-article-form']); ?>

这两个参数什么意思呢 enableAjaxValidation 顾名思义就是启用 ajax 验证，validationUrl 则是验证的地址。

public function actionValidateArticleForm($id = null)
{
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    $model = $id === null ? new Article() : Article::findOne($id);
    $model->load(Yii::$app->request->post());

    return ActiveForm::validate(new Article());
}

如果嫌麻烦可以不开启 enableAjaxValidation，使用 beforeSubmit也可以实现类似的效果。

客户端验证和ajax验证 https://www.yiichina.com/doc/guide/2.0/input-validation