Yii 1.1 - creating a multi step form with validation

Question

I'm basically trying to create a multi-step form using the CActiveForm class in Yii. The idea is I want to use the built-in functionality to achieve this in the simplest way possible. The requirement I have is as follows:

• A multi step ONE PAGE form (using DIVs that show/hide with jQuery)
• AJAX validation on EACH step (validate step-specific attributes only)
• The validation MUST work using the validateOnChange() and validateOnSubmit() methods

This is a half-working solution I have developed so far:

View:

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

Controller:

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();
    }
}

To summarise. Basically what I have is a form with 3 submit buttons (one for each step). In my controller I check which submit button was pressed and I run AJAX validation for the attributes specific to that step.

I use a custom afterValidate() function to show/hide the steps upon submit. On step 3, the default form submit is triggered, which posts all the form attributes to the controller.

This works well, except it won't work with validateOnChange() (since the submit button doesn't get posted). Also I was wondering whether this is actually the best way to do this, or if anyone knows of a better way?

Thanks.

Answer 1

I think better create specific class for each step of validation and use scenarios with rules. Below is small example.

//protected/extensions/validators
class StepOneMyModelValidator extends CValidator
{

    /**
     * @inheritdoc
     */
    protected function validateAttribute($object, $attribute)
    {
        /* @var $object YourModel */
        // validation step 1 here.
        if (exist_problems) {
            $object->addError($attribute, 'step1 is failed');
        }
...

Create other classes(steps) for validation...

// in your model
    public function rules()
    {
        return array(
           array('attr', 'ext.validators.StepOneMyModelValidator', 'on' => 'step1'),
        ...

How to use in controller:

$model = new Listing();
$steps = array('step1', 'step2', /* etc... */);
foreach($_POST as $key => $val) {
if (in_array($key, $steps)) {
       $model->setScenario($key);
       break;
   }
}
$model->validate();
echo '<pre>';
print_r($model->getErrors());
echo '</pre>';
die();

Or we can validate all steps in one validator.

Answer 2

you can always have custom validation and it won't break your normal form validation

in your model

private $step1 = false;
private $step2 = false;
private $all_ok = false;

protected function beforeValidate()
{
    if(!empty($this->attr1) && $this->attr2) // if the fields you are looking for are filled, let it go to next
    {
        $this->step1 = true;
    }

    if($this->step1)
    {
        ... some more validation
        $this->step2 = true;
    }

    if($this->step2)
    {
        ... if all your logic meets
        $this->all_ok = true;
    }

     // if all fields that your looking for are filled, let parent validate them all
     // if they don't go with their original rules, parent will notify
    if($this->all_ok)
        return parent::beforeValidate();

    $this->addError($this->tableSchema->primaryKey, 'please fillout the form correctly');
    return false;
}

Answer 3

OPTION 1 When you do not receive a button, why not validate the entire form, why do you need to validate only specific attributes? Yii will validate the entire model, send back all the errors but only that particular error will be shown by the active form because that is how it works already.

OPTION 2 You can have 3 forms (not 1 like you have now), 1 on each step. Also create 3 scenarios 1 for each step.

Each form has a hidden field that gets posted with the form, it can actually be the scenario name just validate it when it comes in. Validate the model using this hidden field to set the scenario you are on.

You can cache parts on the model when the form is submitted successfully and at the end you have the complete model.

Answer 4

I'd suggesting using scenarios to turn on and off the appropriate rules. Adjust the model scenario based on what is sent to your controller.

Note: this may also be a really good place to use a CFormModel instead of a CActiveRecord, depending on what is in your form.

Edit: can you add a hidden field to each div section that contains the info about what step you are on? Seems like that should work instead of your submit buttons.