Yii2 ActiveForm 提交前显示 loading 状态

开发调优
1

想要实现在点击提交按钮前，显示 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