驗證Yii中的AJAX表單

Question

我是Yii框架中的新手，我有一個工作表單創建一個新用戶， 當前表單重定向到一個視圖頁面，其中有一個輸入用戶視圖，我想在顯示成功消息後保持在同一頁面中。我想用AJAX製作。

這是我的觀點：

<?php 
/* @var $this UserController */ 
/* @var $model User */ 

$this->breadcrumbs=array(
    'Users'=>array('index'), 
    'Create', 
); 

$this->menu=array(
    array('label'=>'List User', 'url'=>array('index')), 
    array('label'=>'Manage User', 'url'=>array('admin')), 
); 
?> 
<h1>Create User</h1> 
<?php $this->renderPartial('_form', array('model'=>$model)); ?> 

這裏是我的控制器：

class UserController extends Controller 
{ 
... 

    public function actionCreate() 
    { 
     $model=new User; 

     // Uncomment the following line if AJAX validation is needed 
     $this->performAjaxValidation($model); 

     if(isset($_POST['User'])) 
     { 
      $model->attributes=$_POST['User']; 
      if($model->save()) 
       $this->redirect(array('view','id'=>$model->id)); 
     } 


     $this->render('create',array(
      'model'=>$model, 
     )); 

    } 

... 
/** 
    * Performs the AJAX validation. 
    * @param User $model the model to be validated 
    */ 
    protected function performAjaxValidation($model) 
    { 
     if(isset($_POST['ajax']) && $_POST['ajax']==='user-form') 
     { 
      echo CActiveForm::validate($model); 
      Yii::app()->end(); 
     } 
    } 


... 
} 

Answer 1

在你的表格你寫：

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'user-form', 
    // Please note: When you enable ajax validation, make sure the corresponding 
    // controller action is handling ajax validation correctly. 
    // There is a call to performAjaxValidation() commented in generated controller code. 
    // See class documentation of CActiveForm for details on this. 
    /*updated by Ismail*/ 
    'enableAjaxValidation'=>true, 
    'clientOptions'=>array(
     'validateOnSubmit'=>true, 
     'afterValidate' => 'js:function(form, data, hasError) { 
      if(hasError) { 
       return false; 
      } 
      else 
      { 
      // return true; it will submit default way 
        ajaxSubmitHappen(form, data, hasError); //and it will submit by ajax function 
       } 
      }', 
     'htmlOptions'=>array('role'=>"form") 
))); ?> 

然後Javascript代碼：

<script> 
     function ajaxSubmitHappen(form, data, hasError) { 
      if (!hasError) { 
       $.ajax({ 
        "type": "POST", 
        "url": "<?php echo $url; ?>", 
        "data": form.serialize(), 
        "success": function (data) { 
         $('#successMessage').html('<div class="alert alert-success"><strong>Success!</strong> User added successfully. </div>'); 
         setTimeout('$("#successMessage").fadeOut("slow")', 2000); 
        } 
       }); 
       /*reset form after submitting*/ 
       $("#user-form")[0].reset(); 
      } 
      else { 
       $('#successMessage').html('<div class="alert alert-danger"><strong>Error!</strong> An error has occured, please try again. </div>'); 
       setTimeout('$("#successMessage").fadeOut("slow")', 2000); 
      } 
     } 
    </script>