0

I have a form-validation function which validates and also checks to see if the username is taken or not (ajax).

This is how I call the code:

 function validate(){
   if(usernameValid()){
      return true;
   }
   else {
      return false;
   }

 }

I also alert the function in order to see what it returns:

  alert(usernameValid());

The problem is that the alertbox alerts "Undefined" in some cases, so my validation wont jump to the next field, it hangs. To be more specific, it alerts "Undefined" in all cases except when the "length===0", then it alerts false which is correct.

Here is the usernameValid function:

    function usernameValid(fld) {
     if( $('#username').val().length !== 0 ) {
      $.post("username_check.php", {
        username: $('#username').val()
      }, function(response){
            response = escape(response);

            if(response==1){
             $('#username_error_invalid').show();
             $('#username_error_empty').hide();
             $('#username_error_taken').hide();
             return false;
            }
            else if(response==2){
                 $('#username_error_taken').show();
                  $('#username_error_invalid').hide();
                 $('#username_error_empty').hide();
                 return false;
            }
            else {
                 $('#username_error_taken').hide();
                  $('#username_error_invalid').hide();
                 $('#username_error_empty').hide();
                 return true;
            }
      });
     } 
     else{ 
         $('#username_error_empty').show();
         $('#username_error_invalid').hide();
         $('#username_error_taken').hide();
         return false;
     }
}

Anybody know what is wrong, ie why the code returns undefined in the cases where I test the "response" variable?

BTW: The validation itself for the username works (error is displayed when it should etc), but it returns undefined...

Thanks

1 Answers1

2

This is an asynchronous call:

$.post("username_check.php", {....

So the return statements in the callback happen long after usernameValid returns (and since it didn't return anything when it was run, it's undefined).

Where you have return false; you should call another function, for example: userNameInvalidFunction(), and something else for true...or just continue submitting, etc.

The alternative is to make your AJAX call synchronous...but I strongly recommend against this, since it'll completely lock up the user's browser while it executes.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • Care to provide an example of the userNameInvalidFunction() so I fully understand? and what do you mean exactly by "something else for true"? –  Nov 10 '10 at 11:05
  • @Camran - e.g. instead of relying on the `return` value at all you're just kicking off other functions when the server response comes back, think of it as replacing `return true;` with `functionToCallWhenValid()` and `return false;` with `functionToCallWhenInvalid()`. – Nick Craver Nov 10 '10 at 11:10
  • is it possible to return true / false INSIDE those functions, or do you mean that I have to call the next "validation_function" inside functionToCallWhenValid() or maybe display error message inside functionToCallWhenInvalid() ? –  Nov 10 '10 at 11:13
  • @Camran - The latter, you can't `return` anything here...since it's returning later when the server comes back, you can't use the response at all. The way asynchronous generally works is call the next thing to run when your current whatever (your `$.post()` in this case) finishes...that's what you'd be doing by calling the next functions, or doing whatever work is needed to show it's valid or not in the callback directly, in either case...kick off the work from your `$.post()` callback. – Nick Craver Nov 10 '10 at 11:15