Trying to animate errors and success messages to fade up using the CActiveForm widget and yiiactiveform.js

Yii 1.1 General Discussion
1

Hey guys I have been trying to figure this out for two days straight now. I am not a seasoned php or javascript developer but I am competent to some degree so bare with me.

I am using the CActiveForm widget for my login form and I would like to display the success and error messages a little better than just unhiding the div of the corresponding error that is thrown. Basically my login form is in the header and very stream lined so unhiding a div will create more vertical space and that is something I don’t want. I could position them absolute but the problem of making them “fancy” is still there. My end goal is to have the error fade up above the input that was incorrect.

My question is how do I detect when the error is thrown and focus on the div to apply some jquery to make it fade up instead of just unhiding it like CActiveForm does for you in the default file? Do I somehow tie into the yiiactiveform.js if so could you give me an example of what I should write to achieve this?

I would really appreciate any help I can get this forum has been a life saver thus far so I figured asking you guys would be my best bet to get the information I need.

2

You can overwrite

$.fn.yiiactiveform.updateInput and $.fn.yiiactiveform.updateSummary from yiiactiveform.js to achieve this behavior.

Basically, you’d create a new js file, something like:




//file name: my-yiiactiveform.js

jQuery(document).ready(function($){

  if($.fn.yiiactiveform && $.fn.yiiactiveform.updateInput){

     delete($.fn.yiiactiveform.updateInput);

  }

  if($.fn.yiiactiveform && $.fn.yiiactiveform.updateSummary){

     delete($.fn.yiiactiveform.updateSummary);

  }

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

     // follow the logic from the original $.fn.yiiactiveform.updateInput until you need the fade effect

  }

  $.fn.yiiactiveform.updateSummary=function(form, messages){

     // same here 

  }

});

Please note, not tested in anyway, i just took a look at the active form js file, but it should work.