Yii Ajax窗口小部件驗證無效

Question

我在窗口小部件中使用了Ajax驗證。這裏是代碼。

的Widget功能

public function run(){ 

if(!Yii::app()->user->isGuest){ 
    $this->controller->redirect('/'); 
} 

$model= new LoginForm; 

// if it is ajax validation request 
if(isset($_POST['ajax']) && $_POST['ajax']==='login-form') 
{ 
    echo CActiveForm::validate($model); 
    Yii::app()->end(); 
} 
    if(isset($_POST['LoginForm'])) 
    { 

     $model->attributes=$_POST['LoginForm']; 
     // validate user input and redirect to the previous page if valid 
     // blah blah....... 

小工具中查看：

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'login-form', 
    'enableAjaxValidation'=> true, 
    'enableClientValidation'=>true, 
    'clientOptions'=>array(
     'validateOnSubmit'=>true, 
    ), 
)); ?> 


    <div class="row"> 
     <?php echo $form->textField($model,'username',array('placeholder'=>'email','class'=>'form-control')); ?> 
     <?php echo $form->error($model,'username'); ?> 
    </div> 

    <div class="row"> 
     <?php echo $form->passwordField($model,'password',array('placeholder'=>'password','class'=>'form-control')); ?> 
     <?php echo $form->error($model,'password'); ?> 
    </div> 


    <div class="row buttons"> 
     <?php echo CHtml::submitButton('Login', array('class'=>'btn btn-primary btn-block')); ?> 
    </div> 
    ... 

• 現在形式不提交。我點擊登錄後沒有任何反應。
• 如果我使enableAjaxValidation fale，表單工作，但不是AJAX。
• 如果我使enableClientValidation爲false，表單工作但仍然沒有AJAX。

任何想法？謝謝。

Answer 1

事情是你使用一個提交按鈕，而不是ajax提交按鈕。

爲此，您可以使用例如來自Yii Bootstrap（或Yii助推器）的ajaxSubmitButton小部件。

所以，在SiteController：

... 
$model= new LoginForm; 

if(isset($_POST['ajax']) && $_POST['ajax']==='login-form') 
{ 
    echo CActiveForm::validate($model); 
    Yii::app()->end(); 
} 
if(isset($_POST['LoginForm'])) 
{ 
    $model->unsetAttributes(); 
    $model->attributes=$_POST['LoginForm']; 

    if($model->validate() && $model->login()) 
    { 
    $array = array('login' => 'success'); 
    $json = json_encode($array); 
    echo $json; 

    Yii::app()->end(); 
    } 
    else{ //This is the important point 
    if(Yii::app()->getRequest()->getIsAjaxRequest()) 
    { 
     $array=$model->getErrors(); 
     $json = json_encode($array); 
     echo $json; //JSON containing the errors set in /models/LoginForm.php 
     Yii::app()->end(); 
    } 
    } 
} 
... 

在你看來：

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'login-form', 
    'enableAjaxValidation'=> true, 
    'enableClientValidation'=>true, 
    'clientOptions'=>array(
    'validateOnSubmit'=>true, 
    ), 
)); 
?> 

<div class="row"> 
    <?php echo $form->textField($model,'username',array('placeholder'=>'email','class'=>'form-control')); ?> 
    <?php echo $form->error($model,'username'); ?> 
</div> 

<div class="row"> 
    <?php echo $form->passwordField($model,'password',array('placeholder'=>'password','class'=>'form-control')); ?> 
    <?php echo $form->error($model,'password'); ?> 
</div> 

<div class="row" > 
    <?php 
     /** THIS IS THE AJAX SUBMIT BUTTON **/ 
    $this->widget('bootstrap.widgets.TbButton', array(
         'buttonType' => 'ajaxSubmit', 
         'label' => 'Login', 
         'ajaxOptions' => array(
           'success' => 
            'function(data){ 
             var obj = $.parseJSON(data); 
             if(obj.login=="success"){ 
              //... 
              // $(location).attr("href","BASEURL/someController/someAction") 
             } 
             else{ 
              if("username" in obj){ 
               $("#LoginForm_username_em_").text(obj.username[0]); 
               $("#LoginForm_username_em_").show(); 
               $("#LoginForm_username").css({"background":"#FEE","border-color":"#C00"}); 
              } 

              if("password" in obj){ 
               $("#LoginForm_password_em_").text(obj.password[0]); 
               $("#LoginForm_password").css({"display":"block"}); 
               $("#LoginForm_password").css({"background":"#FEE","border-color":"#C00"}); 
              } 
              $("#LoginForm_password_em_").show(); 
             } 
          }'), 
        )); 
    ?> 
</div> 

爲了使用Yii引導（或Yii的助推器）的ajaxSubmitButton小部件，你必須下載它從http://yiibooster.clevertech.biz/，將其解壓到/ protected/extensions文件夾中並將其包含在/protected/config/main.php中：

... 
Yii::setPathOfAlias('bootstrap',dirname(__FILE__).'/../extensions/bootstrap'); //booster insead of bootstrap if you download the Yii Booster. 

return array(
    ... 
    'components'=>array(
    ... 
    'bootstrap'=>array(
     'class'=>'ext.bootstrap.components.Bootstrap', // assuming you extracted bootstrap under extensions 
    ), 
) 
) 

Yii Booster有很多其他的小部件，因此我使用它。如果你不想使用Yii助推器作爲ajax提交按鈕，只需使用CHtml :: ajaxSubmitButton

Answer 2

Ajax驗證需要小心。 請在控制檯檢查ajax呼叫的響應。在ajax驗證中，ajax調用的輸出應該是純json。如果來自小部件的ajax驗證可能包含一些帶有ajax調用響應的html。

看看http://www.yiiframework.com/forum/index.php/topic/12222-ajax-validation-in-widget-does-not-work/希望它可以幫到你。