How To Show Form Errorsummary On Ajax Requests

When using traditional Post method [b]form errorsummary/b automatically shown form errors on submitting the form. how do it on Ajax requests?

view file:


<div class="form" >

    <?php

    $form = $this->beginWidget('CActiveForm',array(

        'id'=>'change-profile-form',

        'enableAjaxValidation'=>true,

        'enableClientValidation'=>true,

        'action' => Yii::app()->createUrl('upanel/user/CProfile'),

        'method' => 'POST',

        'clientOptions'=>array(

            'validateOnSubmit'=>true,

            'validateOnChange'=>true,

            'validateOnType'=>false,

        ),

    ));

    ?>

    .

    .

    .

    <div class="row">

        <?php

            echo CHtml::ajaxSubmitButton(

                'update',

                Yii::app()->createUrl('upanel/user/CProfile'),

                array(

                    'type'=>'POST',

                    'data'=>"js:$('#change-profile-form').serialize()",

                    'success'=>'callback',

                    'beforeSend'=>'before',

                ),

                array(

                    'id'=>'update-button'.uniqid(),

                    'class'=>'submit-button',

                )

            );

        ?>

    </div>

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


</div> <!-- End The Profile Form  -->

<?php echo $form->errorSummary($model,'Please solve these errors:') ?>

[size=2]A very quick reply, written by-hand, without testing.[/size]

You have:


'success'=>'callback',

in your ajaxSubmitButton options.

You have to write (and register using CClientScript) your own jQuery/Javascript function, and put it’s name into that success part (or you can use anonymous function and write function code directly into success part). In this function you have to receive Ajax result, check, if it is an error, and if so, manually put error message to your error summary object (#some-form_es_).

I’m not sure, if this is somehow automated in Yii, so I think you have to do this manually, just as I wrote above. At least this is, how I would try to do this.

Test this and try to solve it yourself. If you fail, write again, I’ll try to help you in more details tomorrow.

Thanks dear friend, I’ve done it before and will share soon the own way.

My practice:

in controller have an method that collect model errors:


	protected function getErrorSummary($model)

	{

    	if(Yii::app()->request->isAjaxRequest) {

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

        	if($errors !== '[]') Yii::app()->end($errors); // Sends model errors as json object

	}

in view have a CActiveForm named email-form(id), the ajaxSubmitButton is set as following:


        	echo CHtml::ajaxSubmitButton(

            	'update',

            	array(

                	'dataType'=>'json',

                	'type' => 'POST',

                	'data' => "js:$('#email-form').serialize()",

                	'success'=>'function(data){

                    	if(data.status=="success")

                    	{

                        	hideFormErrors(form="#email-form");

                        	callback(status=data.status);

                    	}else{

                        	formErrors(data,form="#email-form");

                    	}

                	}',

            	),

        	);

and at final JQuery functions:


function formErrors(data,form){

	var summary = '';

	summary="<p>Please solve following errors:</p>";


	$.each(data, function(key, val) {

    	$(form+" #"+key+"_em_").html(val.toString());

    	$(form+" #"+key+"_em_").show();


    	$("#"+key).parent().addClass("row error");

    	summary = summary + "<ul><li>" + val.toString() + "</li></ul>";

	});

	$(form+"_es_").html(summary.toString());

	$(form+"_es_").show();


	$("[id^='update-button']").show();

	$('#ajax-status').hide();//css({display:'none'});

	$('#ajax-status').text('');

}


function hideFormErrors(form){

	//alert (form+"_es_");

	$(form+"_es_").html('');

	$(form+"_es_").hide();

	$("[id$='_em_']").html('');

}

This way holds main functionality of CActiveForm::errorSummary such as css styles. with snippet manipulation you can customize the script for your functionality.

[color="#0000FF"]

I hope be useful[/color]