[Solved] Cactiveform Ajax Validation Error Not Displaying In The Form

Yii 1.1 General Discussion
1

I have created a form using CActiveForm in yii. I am using ajax to submit the form using CHtml::ajaxSubmitButton. Form submission using ajax is working correctly and I am able to get the values in the control using $_POST[‘modelname’][‘fieldname’]. But the ajax form validation is not working correctly. Below is the code

<?php

&#036;form=&#036;this-&gt;beginWidget('CActiveForm', array(


'id'=&gt;'item-brand-form',


'enableAjaxValidation' =&gt; true,


'clientOptions'=&gt;array(


    'validateOnSubmit'=&gt;true,


 ),


'htmlOptions'=&gt;array(


    'class'=&gt;'form-horizontal',


),

)); ?>

<div class="form-group">

<?php echo $form->labelEx($model,‘Brand Name’,array(‘class’=>‘control-label col-lg-4’,‘for’=>‘ItemBrand_brand_name’)); ?>

<div class="col-lg-6">

<?php echo $form->textField($model,‘brand_name’,array(‘class’=>‘form-control’)); ?>

<?php echo $form->error($model,‘brand_name’); ?>

</div>

<!-- End col-lg-6 -->

</div><!-- End Form Group -->

<div class="form-group">

<?php echo $form->labelEx($model,‘Brand Code’,array(‘class’=>‘control-label col-lg-4’,‘for’=>‘ItemBrand_brand_code’)); ?>

<div class="col-lg-6">

<?php echo $form->textField($model,‘brand_code’,array(‘class’=>‘form-control’)); ?>

</div>

<!-- End col-lg-6 -->

</div><!-- End Form Group -->

<div class="form-group">

<div class="col-lg-4"></div>

<div class="col-lg-2">

<?php echo CHtml::ajaxSubmitButton(‘Apply’,array(‘class’=>‘btn btn-lg btn-primary’)); ?>

</div>

</div>

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

Also in the controller action following code is not working.

if(isset($_POST[‘ajax’]) && $_POST[‘ajax’]===‘item-brand-form’)

    {


        echo CActiveForm::validate(&#036;model);


        Yii::app()-&gt;end();


    }

so instead I am using

if(Yii::app()->getRequest()->getIsAjaxRequest())

    {


    echo CActiveForm::validate( array( &#036;model)); 


    Yii::app()-&gt;end(); 


    }

if(Yii::app()->getRequest()->getIsAjaxRequest())

    {


    echo CActiveForm::validate( array( &#036;model)); 


    Yii::app()-&gt;end(); 


    }

While checking in the browser I am getting the response

{"ItemBrand_brand_name":["Brand Name cannot be blank."]}

But the error message is not displaying in the form. Also why the $_POST[‘ajax’] is not working ? Please help. Thanks in advance.

2

Hi, You need to parse the request result on "success" call back of ajax submit button and assign them to error containers on the form. This is just a workaround. (not easy though)

You are handling the form submission via ajax manually. Try adding submit button in form and then you will see error messages(if any) for fields when you hit this button.

3

Thanks shivg. If I use submit button it is working. Is there a way I could update the contents of a div with ajax result if the submission is successful. I know in ajaxSubmit Button there is an option ‘update’ using which I can do that. Is there a way using CActiveForm through which I can do that? In the view file of the form I have called another view using renderPartial(). So I want to update the contents of that view on success.

4

To give you quick answer,

Using CActiveForm you can try "afterValidate" if you are using ajax validations in this way.

CActiveForm




'enableAjaxValidation' => true,

'clientOptions' => array(

'afterValidate' => 'js:function(form,data,hasError){ if(!hasError){


                alert(data);// Or update any html element in your document


            };return false;}'

)

At server




if(isset($_POST['ajax']) && $_POST['ajax']==='item-brand-form')

{

     

     $validatedJSONStr =  CActiveForm::validate($model);

     if( $validatedJSONStr != '[]' )

     {

        // This form has errors. Do not proceed further. Show the error messages

        echo $validatedJSONStr; 

        Yii::app()->end();

     }else

     {

       // Form is valid. 

       // We can process this form.

       // Show success message here.

       echo "Form submitted.";

       Yii::app()->end();

     }

    

}

In above method we validate form via ajax, submit it and show the success message, you can also pass extra

information from server when form is valid and get this in aftervalidate function’s “data” attribute.

This is just a workaround and I am not sure that this is "correct" way of doing ajax form submissions using CActive form. But I have used it and it works. If somebody has any better answer please share.

Thanks in advance.

5

Thanks shivg. It is working by using aftervalidate.

6

Hi,

please see it this wiki I hope it’s some help.