JQuery Username Validation

Question

I'm new to JQuery and attempting to write a script to check username availability. My problem is that no matter what I type, I always get back "This username is already in use."

JQuery source:

$(document).ready(function() {

jQuery.validator.addMethod("usernameCheck", function(username) {
   var isSuccess = false;
   $.ajax({ url: "username_availability.php",
            data: "username=" + username,
            async: false,
            success:
                function(msg) { isSuccess = msg === "TRUE" ? true : false }
          });
    return isSuccess;
},"");

$("#register_form").validate({
    onkeyup:false,
    rules: {
        username: {
            required: true,
            minlength: 3,
            usernameCheck: true    // remote check for duplicate username
        }
    },
    messages: {
        username: {
            required: "username is required.",
            minlength: jQuery.format("username must be at least {0} characters in length."),
            usernameCheck: "This username is already in use."
        }
    }
});

PHP Source:

include('database_connection.php');                                  
if (isset($_POST['username'])) {                                                               
    $username = mysql_real_escape_string($_POST['username']);                                  
    $check_for_username = mysql_query("SELECT user_id FROM users WHERE username='$username'"); 
    if (mysql_num_rows($check_for_username)) {
        echo "TRUE";                                                                           
    } else {
        echo "FALSE";                                                                           //No Record Found - Username is available
    }
}
?>

HTML Source:

<input class="username" id="username" type="text" name="username" value="" maxlength="20" />&nbsp;

Thanks a lot

Answer 1

Set the ajax call option type to 'POST'. Also, AJAX won't block the return isSuccess.

You might look at the remote validation provided by jQuery Validate.

http://docs.jquery.com/Plugins/Validation/Methods/remote#options

Change your rules.

rules: {
        username: {
            required: true,
            minlength: 3,
            remote: 'username_availability.php' // remote check for duplicate username
        }
    },

Just look at the examples.

Answer 2

I'm wondering if this line is the problem:

data: "username=" + username,

Try changing this into a proper array as I don't believe jQuery automatically resolves this sort of format, especially for POST data. Also, set an option of type : 'post' in your $.ajax call since jQuery automatically resolves $.ajax requests to GET and you're using POST in your PHP script.

Answer 3

Try changing the PHP source to return "1" or "0":

include('database_connection.php');                                  
if (isset($_POST['username'])) {                                                               
    $username = mysql_real_escape_string($_POST['username']);                                  
    $check_for_username = mysql_query("SELECT user_id FROM users WHERE username='$username'"); 
    if (mysql_num_rows($check_for_username)) {
        echo "TRUE";                                                                           
    } else {
        echo "FALSE";                                                                           //No Record Found - Username is available
    }
}
?>

and then change your JS to parse that as an integer:

success:
 function(msg) { 
   isSuccess = parseInt(msg);
 }

Answer 4

You could use the following, just change it for your user name (I use the email address as the user name. I use an empty table cell id="emailError" to hold the message.

The jQuery:

    $('#email').keyup(function(){
      $.ajax({
        type: 'POST',
        url: 'ajax.checkEmail.php',
        data: {e:$('#email').val()},
        success: function(data){
          if(data == 'true'){
            $('#emailError').html('This email is already used');
          }else{
            $('#emailError').html('');
          }
        }
      })
    });

The PHP (ajax.checkEmail.php):

  include('inc.php');

  $query  = 'SELECT COUNT(*) FROM tblcustomers WHERE email = "'.$_POST['e'].'"';
  $result = $dbO->getSingleResult($query);

  if($result > 0)
    print 'true';
  else
    print 'false';

Answer 5

This works just check made the same code

      jQuery.validator.addMethod("usernameCheck", function(username) {
      var isSuccess = false;
      $.ajax({ url: "checkusr.php",
      data: "username=" + username,
      async: false,
      success:
      function(msg) { 

      if(msg ==0)
      {
  isSuccess=false;
      }
      else 
      {

       isSuccess=true;
      }
        }


       });

        return isSuccess;
         },"Username not available");

PHP SIDE CODE

           if ($obj->checkUsername($_GET['username'],"artist")> 0 )
       {
       echo 0;
        }
    else 
    {
  echo 1;
 }

  }