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

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

该问题的实质其实与modal的关系倒不大,其问题的核心在于ActiveForm的异步验证上,解决了首要矛盾,咱们本篇文章的问题也就迎刃而解了。顺便再叨唠一句,modal确实没啥好说了。后面如果有我再把话改回来。html

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

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

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

关于validateUrl咱们作一个说明。若是你不设置该参数,该地址默认是你当前路由,而又恰巧你当前路由就是表单form的action,你会很好奇的发现,当表单项input失去焦点的时候,你对数据的修改已经提交到后端进行了处理了?这每每不是咱们想要的,此时就须要给validateUrl设置一个路由地址,其所要请求的操做的意义就在于异步作验证!咱们看具体实现:后端

 

//表单提交操做,基本上不须要作改动
if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->redirect(['index']);
    }
}
return $this->render('create', [
    'model' => $model,
]);

// @see http://www.manks.top/yii2_modal_activeform_ajax.html
// 看主要的验证操做,该操做是表单字段失去焦点时异步验证,同时若是直接提交表单,也会先执行该操做进行验证
public function actionValidateForm () {
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    $model = new Model();  
    $model->load(Yii::$app->request->post());  
    return \yii\widgets\ActiveForm::validate($model);  
}

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

本期主题篇幅短小但内容精湛,但愿对你有所帮助!app

[考虑目前国内网站大部分采集文章十分频繁,更有甚者不注明原文出处,原做者更但愿看客们查看原文,以防有任何问题不能更新全部文章,避免误导!]yii

相关文章
相关标签/搜索