yii modal box form validation

Question

I am using yii framework for my website. I have a signup form in modal box. If i submit the form without fill the validation errors should show within the modal box without refresh. But now it redirects to some other page. How can i show the validation errors within the modal box in the same page?

This is the code that i have used for sign up view

<?php 
    $model=new SignupForm;

  $form=$this->beginWidget('CActiveForm', array(
    'id'=>'signup-form',
    'enableAjaxValidation'=>true,
    'action'=>'site/signup'
));
?>
<?php echo $form->errorSummary($model); ?> 
<?php echo $form->textField($model,'name',array('value'=>'Enter Your Name', 'onclick'=>'javascript:this.value=""', 'onblur'=> 'this.value = ( this.value == "" ) ? "Enter Your Name" : this.value;')); ?><br />
<?php echo $form->textField($model,'email',array('value'=>'Enter Your Email ID', 'onclick'=>'javascript:this.value=""', 'onblur'=> 'this.value = ( this.value == "" ) ? "Enter Your Email ID" : this.value;')); ?><br />
<?php echo $form->textField($model,'phone',array('value'=>'Telephone', 'onclick'=>'javascript:this.value=""', 'onblur'=> 'this.value = ( this.value == "" ) ? "Telephone" : this.value;')); ?><br />
    <!--<input type="text" value="username" onClick="this.value=''"/><br/>
    <input type="password" value="Password" onClick="this.value=''"/>    -->
  <div class="d-login"><?php echo CHtml::submitButton('Submit'); ?>
  <?php /*?><input type="image" alt="Login" title="Login" src="<?php echo Yii::app()->request->baseUrl; ?>/images/signup.png"/><?php */?>
  </div>
  <?php $this->endWidget(); ?>

The code in controller:

public function actionSignup()
    {
        $model=new SignupForm;

        // if it is ajax validation request
        if(isset($_POST['ajax']) && $_POST['ajax']==='signup-form')
        {
            $model->attributes=$_POST['SignupForm'];
            echo CActiveForm::validate($model);
            Yii::app()->end();
        }


        // collect input data
        if(isset($_POST['SignupForm']))
        {
            $model->attributes=$_POST['SignupForm'];
            $name=$model->name;
            $email=$model->email;
            $phone=$model->phone;

            $newsletter = new Newsletter();


            if($model->validate())
            {

                //insert  data
                $newsletter->varName = $name;
                $newsletter->varEmail = $email;
                $newsletter->varPhone = $phone;
                if($newsletter->save()) {
                $url = Yii::app()->getBaseUrl();
                Yii::app()->getRequest()->redirect($url);
                    }

             } 
        }
        $this->render('signup',array('model'=>$model));

        }

Answer 1

You should define the validation rules in signup model.. Or paste your sign up model here..

Answer 2

You have to use ajax and renderPartial if you want to validate a model inside a dialog modal box. below is an untested code.(From this link )

in your views/signup.php

<div class="form">  
    <?php $form=$this->beginWidget('CActiveForm', array(
        'id'=>'signup-form',
        'enableAjaxValidation'=>false,
    ));
    ?>
    <?php echo $form->errorSummary($model); ?> 
    <?php echo $form->textField($model,'name',array('value'=>'Enter Your Name', 'onclick'=>'javascript:this.value=""', 'onblur'=> 'this.value = ( this.value == "" ) ? "Enter Your Name" : this.value;')); ?><br />
    <?php echo $form->textField($model,'email',array('value'=>'Enter Your Email ID', 'onclick'=>'javascript:this.value=""', 'onblur'=> 'this.value = ( this.value == "" ) ? "Enter Your Email ID" : this.value;')); ?><br />
    <?php echo $form->textField($model,'phone',array('value'=>'Telephone', 'onclick'=>'javascript:this.value=""', 'onblur'=> 'this.value = ( this.value == "" ) ? "Telephone" : this.value;')); ?><br />
    <div class="d-login">
        <?php echo CHtml::submitButton('Submit'); ?>
    </div>
     <?php $this->endWidget(); ?>
</div>

In your controller

public function actionSignup()
    {
        $model=new SignupForm;


        if(isset($_POST['SignupForm']))
        {
            $model->attributes=$_POST['SignupForm'];
            $name=$model->name;
            $email=$model->email;
            $phone=$model->phone;

            $newsletter = new Newsletter();
            if($model->save())
            {
                //insert  data
                $newsletter->varName = $name;
                $newsletter->varEmail = $email;
                $newsletter->varPhone = $phone;
                if($newsletter->save()) 
                {               

                    if (Yii::app()->request->isAjaxRequest)
                    {
                        echo CJSON::encode(array(
                            'status'=>'success',
                            ));
                        exit;               
                    }
                    else
                    {   
                        $url = Yii::app()->getBaseUrl();
                        Yii::app()->getRequest()->redirect($url);
                    }
            }
        }

        if (Yii::app()->request->isAjaxRequest)
        {
            echo CJSON::encode(array(
                'status'=>'failure', 
                'div'=>$this->renderPartial('signup', array('model'=>$model), true)));
            exit;               
        }
        else
            $this->render('signup',array('model'=>$model,));
    }

And finally in your view file where you want to display the signup modal box

<?php echo CHtml::link('Signup', "",  // the link for open the dialog modal
    array(
        'style'=>'cursor: pointer; text-decoration: underline;',
        'onclick'=>"{doSignup(); $('#dialogSignup').dialog('open');}"));?>

<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array( // the dialog
    'id'=>'dialogSignup',
    'options'=>array(
        'title'=>'Signup',
        'autoOpen'=>false,
        'modal'=>true,
        'width'=>550,
        'height'=>470,
    ),
));?>
<div class="divForForm"></div>

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

<script type="text/javascript">
function doSignup()
{
    <?php echo CHtml::ajax(array(
            'url'=>array('site/signup'),
            'data'=> "js:$(this).serialize()",
            'type'=>'post',
            'dataType'=>'json',
            'success'=>"function(data)
            {
                if (data.status == 'failure')
                {
                    $('#dialogSignup div.divForForm').html(data.div);
                    $('#dialogSignup div.divForForm form').submit(doSignup);
                }
                else
                {
                    window.location.href =".Yii::app()->getBaseUrl().";
                }

            } ",
            ))?>;
    return false; 

}

</script>