Animate client side error messages

Hi,

How would I go about having the error messages that popup, with client side validation on a form, animate in some manner rather than just appearing?

Definitely you should use jQuery (simple animation) or jQuery UI (if you need more complex animations). Check out their webpages (especially second one) in the demo extension to evaluate, what you can possibly do with them (quite a lot) and with what minimum piece of code.

For simple hiding / showing error message I use only jQuery and build-in animations of fade-in / fade-out. For example (jQuery / JavaScript code):


$("#flash-message").delay(2100).fadeOut(900)

or the same, surrounded by proper Yii code:


app()->clientScript->registerScript('flash-hide', '$("#flash-message").delay(2100).fadeOut(900);');

This one is for hiding once displayed error message. If you want to show it use instead:


$("#flash-message").fadeIn(900)

or (if error message is rendered visible into page), first hide it then show it with an animation:


$("#flash-message").hide().fadeIn(900)

In any of above examples, #flash-message corresponds to div element containing error message text (and some styling):


<div id="flash-message" class="flash-success flash-message-float">Error message</div>

and number in brackets correspond to time period (in millisecond) determining how long current operation (animation or delay between) should last.

Check out documentation for jQuery / jQuery UI as it it very well documented and animation of divs is one of the simplest aspects of using jQuery / jQuery UI.

Yip thats all fine. Was wondering how I tie it in with the yii model error display messages that currently exist.

This is already tied-up with build-in error-messaging system. At least in my app. Look for the line:


<div id="flash-message" class="flash-success flash-message-float">Error message</div>

It’s a modified version of what I found in files auto-generated by Gii. I just attached uniqe ID (flash-message) to be able to reference this element via jQuery.and added additional class (flash-message-float), next to existing, original one (flash-success) to make this error box floating, what was my idea (but is not necessary to have animated error boxes).

Generate yourself a fresh new application and look for flash-success or similar class in code, to look how it is solved in original code.

Cheers,

I’m more referring to the error messages that display next to each text field when it doesn’t validate rather than the message at the top of the form?

Have been digging through the JS in Yii and found a way to override the method that makes the error messages display.

For anyone thats interested you can put the following into your project to make messages appear

Note the following line:


$error.html(messages[attribute.id][0]);

has been changed to:


$error.html(messages[attribute.id][0]).hide().fadeIn('fast');

Drop the following into a js file and include into your Yii project pages you want the fade effect on:


(function()

{

	 

	// Define overriding method.

	jQuery.fn.yiiactiveform.updateInput = function(attribute, messages, form) 

	{

		attribute.status = 1;

		var hasError = messages!=null && $.isArray(messages[attribute.id]) && messages[attribute.id].length>0;

		var $error = $('#'+attribute.errorID, form);

		var $container = $.fn.yiiactiveform.getInputContainer(attribute, form);

		$container.removeClass(attribute.validatingCssClass)

			.removeClass(attribute.errorCssClass)

			.removeClass(attribute.successCssClass);


		if(hasError) {

			$error.html(messages[attribute.id][0]).hide().fadeIn('fast');

			$container.addClass(attribute.errorCssClass);

		}

		else if(attribute.enableAjaxValidation || attribute.clientValidation) {

			$container.addClass(attribute.successCssClass);

		}

		if(!attribute.hideErrorMessage)

			$error.toggle(hasError);


		attribute.value = $('#'+attribute.inputID, form).val();


		return hasError;

		 

	}

})();