Live Username Availability check with Jquery

3

Live username availability check is needed in almost every website allowing that allow a user to create an account, I have written a simple script that checks the availability of usernames as the user enters any key in the input box.
Main features of this script are:
1. Live username checking,

2. Invalid key safe (no invalid input is allowed),

3. Easy implementation.

So try the live demo and enjoy.

Don’t hesitate to ask me your doubts…

Live Demo Download Script

Table Structure

CREATE TABLE `webspeaks`.`users` (
`uname` VARCHAR( 20 ) NOT NULL ,
`id` INT( 10 ) NOT NULL AUTO_INCREMENT PRIMARY KEY
) ENGINE = MYISAM

JQUERY CODE

<script type="text/javascript">
$(document).ready(function()
{
 $("#username").focus();
 //prevents autocomplete in some browsers
 
 $("#username").attr('autocomplete', 'off').keyup(function(event)
 {
  var name = $("#username").val();
  // Prevent invalid keyboard inputs.
  // Keys with codes 40 and below are special
  // (enter, arrow keys, escape, etc.).
  // Keys with codes 91 and above are special
  // (NUM LOCK, window keys, etc.).
  // Key code 8 is backspace.
  // Key code 13 is enter.
  // Key code 20 is CAPS LOCK.
  // Key code 16 is SHIFT.
  // Key code 9 is TAB.
  // Key code 37 is LEFT key.
  // Key code 38 is UP key.
  // Key code 39 is WRITE key.
  // Key code 40 is DOWN key.
  if(event.keyCode > 40 || event.keyCode <91  || event.keyCode == 8 || event.keyCode == 13 || 
  event.keyCode == 20 || event.keyCode == 16 || event.keyCode == 9 || 
  event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || 
  event.keyCode == 40)
  {
   $("#status").empty();
   if(name.length > 3 )
   {
    $("#status").html('<img align="absmiddle" src="loading.gif" /> Checking availability...').show();
    $.ajax({
    type: "POST",
    url: "namecheck.php",
    data: "username="+ name,
    success: function(msg)
    {
     $("#status").html(msg).show();
    }
    });
   }
  }
  else
  {
   $("#status").html('Invalid character!').addClass('err').show();
  }
 });
});

//-->

</script>

CSS Code

.main{
font-family:Tahoma;
width:300px;
margin-left:200px;
height:500px;
}
.heading{
background-color:#2859AA;
border:1px solid #121649;
color:#FFFFFF;
font-weight:bold;
font-size:14px;
padding:3px;
text-align:center;
margin-bottom:20px;
}
#username{
border:2px solid #435FBC;
width:200px;
height:30px;
padding:3px;
color:#A4A4A4;
font-weight:bold;
}
#status{
display:none;
}
.err{
color:#CC0000;
font:Tahoma 80%;
}
.suc{
color:#33CC00;
font:Tahoma 80%;
}

Index.php

<body>
<div class="main">
<div class="heading">Live Username Availability Check</div>
<label>User name:</label>
<input type="text" id="username" name="username"/>
<div id="status"></div>
</div>
</body>
</html>

namecheck.php

<?php
if(isSet($_POST['username']))
{
 include("../connect.php");
 $username = mysql_real_escape_string($_POST['username']);
 if(strlen(trim($username))>3)
 {
  $query = mysql_query("SELECT `uname` FROM `users` WHERE `uname`='$username'");
  if(mysql_num_rows($query))
  {
   echo '<span class="err">The username <b>'.$username.'</b> is already in use.</span>';
  }
  else
  {
   echo '<img align="absmiddle" src="check.png" height="30" width="30" /><span class="suc"><b>'.$username.'</b> is available.</span>';
  }
 }
}
?>

Live Demo Download Script

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

3 thoughts on “Live Username Availability check with Jquery”

Comments are closed.