我基本上尝试使用Yii中的CActiveForm类创建一个多步骤表单.我的想法是希望使用内置功能以最简单的方式实现这一点.我的要求如下：

>多步骤ONE PAGE表单(使用显示/隐藏jQuery的DIV)
> EACH步骤的AJAX验证(仅验证特定于步骤的属性)
>验证必须使用validateOnChange()和validateOnSubmit()方法

这是我迄今为止开发的半工作解决方案：

视图：

@H_502_9@<div class="form"> <?PHP $form = $this->beginWidget('CActiveForm',array( 'id'=>'listing-form','enableClientValidation'=>false,'enableAjaxValidation'=>true,'clientOptions'=>array( 'validateOnChange'=>true,'validateOnSubmit'=>true,'afterValidate'=>'js:validateListing',),)); ?> <?PHP echo $form->errorSummary($model); ?> <div class="step" id="step-1"> // model input fields <?PHP echo CHtml::submitButton('Next Step',array('name'=>'step1')); ?> </div> <div class="step" id="step-2" style="display: none;"> // model input fields <?PHP echo CHtml::submitButton('Next Step',array('name'=>'step2')); ?> </div> <div class="step" id="step-3" style="display: none;"> // model input fields <?PHP echo CHtml::submitButton('Submit',array('name'=>'step3')); ?> </div> <?PHP $this->endWidget(); ?> </div>

JavaScript的：

@H_502_9@function validateListing(form,data,hasError) { if(hasError) { // display JS flash message } else { if($('#step-1').css('display') != 'none') { $('#step-1').hide(); $('#step-2').show(); } else if($('#step-2').css('display') != 'none') { $('#step-2').hide(); $('#step-3').show(); } else if($('#step-3').css('display') != 'none') { return true; // trigger default form submit } } }

控制器：

@H_502_9@public function actionCreate() { $model = new Listing; // step 1 ajax validation if(isset($_POST['step1'])) { $attributes = array('name','address1','etc'); $this->performAjaxValidation($model,$attributes); } // step 2 ajax validation if(isset($_POST['step2'])) { $attributes = array('category','type',$attributes); } // step 3 ajax validation if(isset($_POST['step3'])) { $attributes = array('details','source',$attributes); } // process regular POST if(isset($_POST['Listing'])) { $model->attributes = $_POST['Listing']; if($model->validate()) // validate all attributes again to be sure { // perform save actions,redirect,etc } } $this->render('create',array( 'model'=>$model,)); } protected function performAjaxValidation($model,$attributes=null) { if(isset($_POST['ajax']) && $_POST['ajax']==='listing-form') { echo CActiveForm::validate($model,$attributes); Yii::app()->end(); } }

总结一下.基本上我所拥有的是一个带有3个提交按钮的表单(每个步骤一个).在我的控制器中,我检查按下了哪个提交按钮,并对特定于该步骤的属性运行AJAX验证.

我使用自定义的afterValidate()函数来显示/隐藏提交时的步骤.在步骤3,触发默认表单提交,将所有表单属性发布到控制器.

这很有效,除了它不能与validateOnChange()一起使用(因为提交按钮没有被发布).另外我想知道这是否真的是最好的方法,或者是否有人知道更好的方法？

谢谢.