jQuery validation issue when click away

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
cohq82
Forum Commoner
Posts: 43
Joined: Mon Apr 21, 2008 8:38 pm

jQuery validation issue when click away

Post 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
nyoka
Forum Commoner
Posts: 45
Joined: Thu Apr 09, 2009 12:53 pm

Re: jQuery validation issue when click away

Post by nyoka »

You could use the "onchange" event rather than the "onblur" which would be called when the field is changed.
cohq82
Forum Commoner
Posts: 43
Joined: Mon Apr 21, 2008 8:38 pm

Re: jQuery validation issue when click away

Post 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?
cohq82
Forum Commoner
Posts: 43
Joined: Mon Apr 21, 2008 8:38 pm

Re: jQuery validation issue when click away

Post by cohq82 »

Can you someone help. Thanks
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: jQuery validation issue when click away

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
cohq82
Forum Commoner
Posts: 43
Joined: Mon Apr 21, 2008 8:38 pm

Re: jQuery validation issue when click away

Post 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?
Last edited by Benjamin on Tue Apr 28, 2009 12:14 am, edited 1 time in total.
Reason: Changed code type from text to javascript
cohq82
Forum Commoner
Posts: 43
Joined: Mon Apr 21, 2008 8:38 pm

Re: jQuery validation issue when click away

Post by cohq82 »

Any comment pls?
Post Reply