Question

我在我的小部件中使用Ajax验证。这是代码。

小部件功能

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 booster）中的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 Bootstrap（或Yii Booster）的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 booster作为ajax提交按钮，只需使用CHtml :: ajaxSubmitButton

Answer 2

Ajax验证需要一点小心。请在控制台检查ajax呼叫的响应。在ajax验证中，ajax调用的输出应该是纯json。如果来自widget的ajax验证可能包含一些带有ajax调用响应的html。

看看http://www.yiiframework.com/forum/index.php/topic/12222-ajax-validation-in-widget-does-not-work/希望它对您有帮助。

小部件中的Yii Ajax验证无法正常工作

2 个答案: