Yii 1.1 - 使用验证创建多步骤表单

Question

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

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

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

视图:

<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的:

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
            }
        }
}

控制器:

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', 'etc');

            $this->performAjaxValidation($model, $attributes);
        }

        // step 3 ajax validation
        if(isset($_POST['step3']))
        {
            $attributes = array('details', 'source', 'etc');

            $this->performAjaxValidation($model, $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()(因为提交按钮没有发布).此外,我想知道这是否真的是最好的方法,或者如果有人知道更好的方法？

谢谢.

Answer 1

我建议使用场景来打开和关闭适当的规则。根据发送到控制器的内容调整模型场景。

注意：这也可能是使用 CFormModel 而不是 CActiveRecord 的好地方，具体取决于表单中的内容。

编辑：您可以向每个 div 部分添加一个隐藏字段，其中包含有关您所处步骤的信息吗？看起来这应该可以代替您的提交按钮。