Validation on cjuidialog modal window

Question

I have a similar similar solution as posted on the wiki here

But i'm unable to have my validation rules working as expected. When I click on the submit buttom the modal window closes and nothing is saved if I don't fill all the required fields.

Any idea of what i'm missing here? I have ajax validation "on" on the action and also on the view.

Here's some pieces of my code:

model Institution.php

        public function actionAddnew() {
        $model=new Institution;
        // Ajax Validation enabled
        $this->performAjaxValidation($model);
                $flag=true;
        if(isset($_POST['Institution']))
        {       $flag=false;
            $model->attributes=$_POST['Institution'];

            if($model->save()) {
                //Return an <option> and select it
                            echo CHtml::tag('option',array (
                                'value'=>$model->id,
                                'selected'=>true
                            ),CHtml::encode($model->name),true);
                        }
                }
                if($flag) {
                    Yii::app()->clientScript->scriptMap['jquery.js'] = false;
                    $this->renderPartial('createDialog',array('model'=>$model,),false,true);
                }
    }

file createDialog.php

<?php 
$this->beginWidget('zii.widgets.jui.CJuiDialog',array(
                'id'=>'institutionDialog',
                'options'=>array(
                    'title'=>Yii::t('institution','Institution'),
                    'autoOpen'=>true,
                    'modal'=>'true',
                    'width'=>'auto',
                    'height'=>'auto',
                ),
                ));
echo $this->renderPartial('_formDialog', array('model'=>$model)); ?>
<?php $this->endWidget('zii.widgets.jui.CJuiDialog');?>

and finally a piece from the _formDialog.php

    <div class="form" id="institutionDialogForm">

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

    <?php echo $form->errorSummary($model); ?>


    <div class="row">
        <?php echo $form->labelEx($model,'name'); ?>
        <?php echo $form->textField($model,'name',array('size'=>60,'maxlength'=>255)); ?>
        <?php echo $form->error($model,'name'); ?>
    </div>

....
    <div class="row buttons">
        <?php echo CHtml::ajaxSubmitButton(Yii::t('institution','Create'),CHtml::normalizeUrl(array('institution/addnew','render'=>false)),array('success'=>'js: function(data) {
                        $("#User_institutionid").append(data);
                        $("#institutionDialog").dialog("close");
                    }'),array('id'=>'closeInstitutionDialog')); ?>
    </div>

<?php $this->endWidget(); ?>

</div>

Any idea? in this example I would like that the "name" that is already set as required on the rules to be required here as well. Note that on the default crud files that gii generates this is working ok. And I'm trying to implement a wizard with modal windows to add new itens while filling the wizards.

To be more clear, I would like to avoid submitting the modal window so that the required field(s) are asked to be filled before hitting the submit buttom on the modal window.

Answer 1

The problem here is that you are closing the dialog according to the success of the ajax call and not on the success of validation, i.e the line:

$("#institutionDialog").dialog("close");

is always executed when your ajaxSubmitButton is clicked, regardless of validation state of form.

To close the dialog only when validation was successfully passed, you will have to change the success callback function of jquery ajax, and also the way that the form is processed in your controller action.

First, you have to detect if the model was successfully validated. To do this in your controller action, pass an additional field that indicates validation status:

if($model->save()) {
    echo CJSON::encode(
        array(
            'data' => CHtml::tag('option',array (
                          'value'=>$model->id,
                          'selected'=>true
                          ), CHtml::encode($model->name),true),
            'status'=>'success'
        )
    );
}

Then change your ajaxSubmitButton's ajax options (namely the success callback, and dataType):

<?php echo 
    CHtml::ajaxSubmitButton(
        // ... old code
        array(
            'dataType'=>'json',
            'success'=>'function(data) {
                if(data != null && data.status == "success") {
                    $("#User_institutionid").append(data.data);
                    $("#institutionDialog").dialog("close");
                }

            }'),
        // ... old code
    ); 
?>