Hide / Show Validation On Input Blur / Focus

Hi all,

Currently I have this form:


    $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 class="row">

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

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

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


        <div class="actions">

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


        <?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() {


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





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





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?


Changed to afterValidateAttribute:

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


    // do action here



    // do action here