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?