Page 1 of 1

jQuery validation issue when click away

Posted: Wed Apr 22, 2009 11:59 pm
by cohq82
I just designed this page:
http://ovielay.com/register1.html

There is an error if you follow below steps:
1. Type "f" (or any letter) in username
2. Click away to pass field or anywhere to blur the focus --> you will see error msg on the username (less than 2 chars)
3. Click back on username
4. Type more "ff" then delete so you have 1 "f" only. Now you see the error message still there
5. Without clicking away, in the username box, type more "ff" again. Error msg still there although >2 chars
6. Click away and error msg not disappear as expected
7. Click back on username box. Now the msg disappear

The desire behavior should be:
5. Without clicking away, in the username box, type more "ff" again. Then the error msg disappears

I use the method as below
http://jquery.bassistance.de/validate/d ... -demo.html

Can someone help to point out the problem? Thanks

Re: jQuery validation issue when click away

Posted: Thu Apr 23, 2009 3:41 pm
by nyoka
You could use the "onchange" event rather than the "onblur" which would be called when the field is changed.

Re: jQuery validation issue when click away

Posted: Thu Apr 23, 2009 6:55 pm
by cohq82
But the purpose of onblur is to fadeout "context help" DIV, not the "error" DIV so it should not have anything to do with it. Or do you have something else in mind?

Re: jQuery validation issue when click away

Posted: Fri Apr 24, 2009 6:35 pm
by cohq82
Can you someone help. Thanks

Re: jQuery validation issue when click away

Posted: Mon Apr 27, 2009 2:38 pm
by pickle
I'd split up your checking into 2 parts. The first is executed onBlur() to determine if the username is too short. If it is, pop up the error. Add an onChange (or onKeyPress or onKeyDown) listener that removes the message once the username gets long enough.

Re: jQuery validation issue when click away

Posted: Tue Apr 28, 2009 12:13 am
by cohq82
I don't quite understand your response. I already split it up as below

Code: Select all

<script type="text/javascript">
$(document).ready(function() {
    
  $('input').focus(function(){
      $(this).parent().next().fadeIn('fast');
      $(this).parent().next().next().hide();
  });
  $('input').blur(function(){
      $(this).parent().next().fadeOut('fast');
  });
    
  $("#frmregister").validate({
 
   rules: {
     username: {
        required: true,
        minlength: 2
     },
     password1: {
        required: true,
        minlength: 5
     },
     password2: {
        required: true,
        minlength: 5,
        equalTo: "#password1"
     }
   },
  errorPlacement: function(error, element) {
      element.parent().next().hide();
      element.parent().next().next().fadeIn('fast');
  }
  });
 
});
</script>
The thing is I feel like sometime jQuery Validation Plug-in's function validate() don't get called at the right time. It should be called every time 'keyup' event trigger. How to fix that?

Re: jQuery validation issue when click away

Posted: Thu Apr 30, 2009 12:39 am
by cohq82
Any comment pls?