Search code examples
jqueryjquery-uiyiijquery-slide-effects

How to create sliding effects for errors notifications in forms?

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 ?

Solution

    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.