Hide / Show Validation On Input Blur / Focus

Hi all,

Currently I have this form:

 <?php

    $form = $this->beginWidget('CActiveForm', array(

        'id' => 'user-login-form',

        'enableAjaxValidation' => true,

        'enableClientValidation' => false,

        'clientOptions' => array(

            'validateOnSubmit' => true,

        )

      ));

    ?>


        <div class="row">

            <label for="username" class="required">Username</label>

            <?php echo $form->textField($model, 'username', array())); ?>

            <?php echo $form->error($model, 'username'); ?>

        </div>

        <div class="row">

            <label for="password" class="required">Password</label>

            <?php echo $form->passwordField($model, 'password', array()); ?>

            <?php echo $form->error($model, 'password'); ?>

        </div>

        <div class="actions">

            <?php echo CHtml::submitButton(t('site', 'Enter'), array('class' => 'bGreenB')); ?>

        </div>


        <?php $this->endWidget(); ?>

I’m trying to hide the current error on its input focus and show the input error(if exists) on blur.

This is what I have so far:

<script type="text/javascript">

    

    $(document).ready(function() {


        $("#UserLoginForm_username").blur(function(){

                $(this).parent('.row').find('div.errorMessage').css('display', 'block');

           

        });

        

        $("#UserLoginForm_username").focus(function(){

            $(this).parent('.row').find('div.errorMessage').css('display', 'none');

        });

      

    });

</script>

The problem comes on blur event, the error will keep showing up even the input was correctly completed.

Any idea how to solve this problem?

Fixed,

Changed to afterValidateAttribute:

 'afterValidateAttribute' => 'js:function(form, attribute, data, hasError){

   $("#"+attribute.id).live("focus",function(){

    // do action here

   }

    $("#"+attribute.id).live("blur",function(){

    // do action here

   }

}