0

Is it possible to create sliding effects for errors notifications in yii framework forms ?

To explain what I mean please visit for example download.com and select "Join CNET" menu item in the top right corner. Please leave "Join CNET" form empty and press "Join CNET" button at the bottom of the form.

As you can see now - all red notifications errors will be elegantly displayed on the screen with really nice "sliding" effect.

So my question is - how to create such kind of the sliding effects for errors notifications in the yii framework forms ?

Kai
  • 38,985
  • 14
  • 88
  • 103
alexanoid
  • 24,051
  • 54
  • 210
  • 410
  • [whathaveyoutried?](http://whathaveyoutried.com) – dInGd0nG Sep 08 '12 at 18:31
  • I'm nothing tried because I don't know how to integrate it into the yii validation process.. Currently I don't have any ideas how to do it so I have asked Stackoverflow community to help me in this question. – alexanoid Sep 08 '12 at 18:35

1 Answers1

1

  1. OK. A standard Yii (CActiveForm) form looks something like this

    <div class="row">
<?php echo $form->labelEx($model,'username'); ?>
<?php echo $form->textField($model,'username'); ?>
<?php echo $form->error($model,'username'); ?>

  2. With CSS you make the error disappear with display: none. You accomplish this (relatively) easily with $htmlOptions:

    $htmlOptions = array('style' => 'display:none');
    echo $form->error($model,'username',$htmlOptions);

  3. Now, if you run your form, the error message will fail to appear. That is good.

  4. Lastly, attach some javascript to your submit button. Something that selects the error messages and fades them in: $(.errorMessage).fadeIn('slow') Note that Yii already gives the error-messages the class .errorMessage

That should do it...

P.S.

Ivo Renkema
  • 2,188
  • 1
  • 29
  • 40
  • One more question - how to implement the same behaviour but in opposite way. I mean - when error message appears, after positive validation hide him in the opposite sliding effect from the full size to zero? How to integrate it into Yii forms validation process, what kind of logic/events should I extend/handle this way ? – alexanoid Sep 09 '12 at 10:50
  • Well, there are a lot of unknowns in your added question. In your "Join CNET" example, the validation is done with an old-fashioned submit button; on the server side. In that case, the error message disappear automatically via the page-refresh. || It now sounds like you are using client-side validation. If this is what you want, you must trigger the fadeIn() jquery from the client-side validation. I can not tell you how; you should dig into CActiveForm (if this is what you are using). Making the error messages disappear could be done via fadeOut(). – Ivo Renkema Sep 09 '12 at 18:29