服务器之家

服务器之家 > 正文

yii2 modal弹窗之ActiveForm ajax表单异步验证

时间:2021-01-27 17:23     来源/作者:白狼

前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题,本以为modal要告一段落可以开始新的话题了,但是实际问题往往超乎想像,这不modal弹窗提交的表单说是怎么验证的问题又出来了,又出来了!

首先撇开modal不谈,我们就yii2 ActiveForm如何以Ajax的方式提交表单做一个简单的说明,这也是我们今天主题的重点,modal确实没啥好说了。后面若是有我再把话改回来。

yii2中,ActiveForm默认做了客户端验证,但是表单的提交,却不是无刷新的。也就是常常看到的表单提交后页面会刷新。如果想要开启无刷新的模式,只需要在ActiveForm开始开启enableAjaxValidation即可,像下面这样

?
1
2
3
4
5
<?php $form = ActiveForm::begin([
'id' => 'form-id',
'enableAjaxValidation' => true,
]
); ?>

注意哦,id和enableAjaxValidation一个都不能少。

接着看服务端的实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
if ($model->load(Yii::$app->request->post())) {
Yii::$app->response->format = yii\web\Response::FORMAT_JSON;
if ($errors = \yii\widgets\ActiveForm::validate($model)) {
return $errors;
} else {
if($model->save(false)) {
return $this->redirect(['index']);
}
}
}
return $this->render('create', [
'model' => $model,
]);

如此一来就简单的实现了yii2异步无刷新提交表单了!

其实下面说与不说已经不重要了,主要是写给一些懒人参考吧。聪明的人看了标题就应该明白了如何解决modal通过ActiveForm提交表单的问题。

为了兼容modal,注意我们说的是兼容而不是实现,我们对程序稍稍做了些改动,仅做参考。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
if ($model->load(Yii::$app->request->post())) {
if ($model->save()) {
if (Yii::$app->request->isAjax) {
Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
return ['success' => true];
}
return $this->redirect(['index']);
} else {
if (Yii::$app->request->isAjax) {
Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
return \yii\widgets\ActiveForm::validate($model);
}
}
}
if (Yii::$app->request->isAjax) {
return $this->renderAjax('create', [
'model' => $model,
]);
} else {
return $this->render('create', [
'model' => $model,
]);
}

以上所述是小编给大家介绍的yii2 modal弹窗之ActiveForm ajax表单验证的相关知识,希望对大家有所帮助,如果大家想了解更多内容敬请关注服务器之家网站!

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
返回顶部