[EXTENSION] How to display validation errors comming from Ajax validation?

I have a CActiveForm and an ajaxSubmitButton which posts to an action. In that action I do this:


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

if (!empty($errors)) {

   echo $errors;

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

}

getting a JSON string in case of a validation error. How can I show those errors from the ajaxSubmitButton clientOptions.sucess callback javascript function?

Thanks in advanced.

Hi,

doesn’t ajaxOptions.success callback function have a parameter (data or response, you name it)? That parameter is your JSON response from the server. Which basically looks like this:




{"fieldid":["error message", "another error message", ...]}



With that you can try traversing that error collection (let’s say i named it response):




var $ul=$('<ul/>');

for(var i in response){

    if(response.hasOwnProperty(i){

        for(var j in response[i]){

            $ul.append('<li>'+response[i][j]+'</li>');

        }

    }

}



Now you should have your $ul (jQuery object) with your errors.

Is this what you wanted?

Yes, that could work, but I was wondering if there’s a built-in function in Yii’s javascript code to apply those error messages to their respective CActiveForm.error labels…

Oh well, I’ve got this so far:


'success'=>"function(html) {

	if (html.indexOf('{')==0) {

   	e = jQuery.parseJSON(html);

   	jQuery.each(e, function(key, value) { jQuery('#'+key+'_em_').show().html(value.toString()); });

	}

}

This code shows the error messages in their respective places.

Now I just need to find out how to apply error styles to input fields, for instance…

BTW, for the js validators there’s a:


messages.push("Message too long.");

How can [font="Courier New"]messages[/font] be used?

Ok, final code:


'success'=>"function(html) {

   if (html.indexOf('{')==0) {

  	var e = jQuery.parseJSON(html);

  	jQuery.each(e, function(key, value) {

  	jQuery('#'+key+'_em_').show().html(value.toString());

  	jQuery('#'+key).addClass('clsError');

  	jQuery('label[for='+key+']').addClass('clsError');

   });

}

This works, but as you can see, it’s a pain in the a$$ to include this in every form you need. Is there any easier way to accomplish this? If not, it would be helpful if Yii could include a simple method to avoid including all that code. It could be a jQuery plugin, for instance, or a method inside Yii’s jquery.activeform.js code.

I forgot to include the server-side code for the validation in the action:


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

  	if ($errors !== '[]') {

     	echo $errors;

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

  	}

Hi,

I agree, it would be helpful if there was some js api to yiiactiveform.

But you can also write that function in js file and include its name always when you want to use it as a callback. It would look like there “is” some method to do what you want :)

cheers

I hope in Yii 2 some work will be done one the forms…

Form without ajax I think outdated… so this should come out of the box

Ok, I created this extension to (partially) solve the problem. It includes a jQuery plugin, which is used to generalize the work:

http://www.yiiframework.com/extension/ajaxvalidationmessages/

here is my practice.