Checking username availability using javascript and php

Question

I'm trying to check the availability for the username but i'm getting a wrong validation, when i try to insert an exist username it doesn't show the right message.

this is the code for the HTML:

<form method="POST" onSubmit="return shouldIsubmit()" enctype="multipart/form-data">

<tr><td>First Name:</td> <td><input type="text" name="Fname" onKeyUp="checkFName(this.value)"/></td><td><span id='FNMsg'></span></td></tr>

<tr><td>Last Name:</td><td><input type="text" name="Lname" onKeyUp="checkLName(this.value)" /></td><td><span id='LNMsg'></span></td></tr> 

<tr><td>Email:</td> <td><input type="text" name="email" onKeyUp="checkE(this.value)"/></td><td><span id='EMsg'></span> </td></tr>

<tr><td>Username:</td> <td><input type="text" name="username" onKeyUp="checkUN(this.value)" /></td><td><span id='UNMsg'></td></tr>

<tr><td>Password:</td> <td><input type="password" name="password" onKeyup="checkpass(this.value)"/></td><td><span id='PMsg'></span></td></tr> 

<tr><td>Confirm Password:</td> <td><input type="password" name="Cpassword" /></td></tr>

<tr><td>Phone Number:</td> <td><input type="text" name="phoneNumber" onKeyup="checkP(this.value)"/></td><td><span id='PhMsg'></span></td></tr>

<tr><td><input type="submit" name="register" value="Register" /></td></tr>

</form>

and this is the javascript code:

<script language='javascript'>

function GetXmlHttpObject() { 
var xmlHttp=null; 
try 
{ 
// Firefox, Opera 8.0+, Safari 
xmlHttp=new XMLHttpRequest(); 
}
catch (e) 
{ 
// Internet Explorer 
try 
{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } 
catch (e) 
{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
} 
return xmlHttp; 
}

var xmlHttp, unF=false, nF=false, lF=false, pF=false;
    
//username checker
function checkUN(str) {
var unExp=/^[a-zA-Z][a-zA-Z0-9]{6,18}$/;       
    if (str.length==0){  document.getElementById("UNMsg").innerHTML="";   return;   }
       
var f1=unExp.test(str);
    if(f1)
    {
    xmlHttp=GetXmlHttpObject(); //use the same function as the previous example
    if (xmlHttp==null)  {   alert ("Your browser does not support AJAX!");   return;   } 
//using ajax
    var url="registerChecker.php";
    url=url+"?username="+str;
    url=url+"&sid="+Math.random(); //another way to prevent caching

    xmlHttp.onreadystatechange=stateChanged; //not function call
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}
    else
    document.getElementById('UNMsg').innerHTML="Username consists of letters and digits and also it must starts with a letter!";
}

function stateChanged() { 
    if (xmlHttp.readyState==4){ 
    if (xmlHttp.responseText=="true")
{
    unF=false;
    document.getElementById("UNMsg").innerHTML="<span style='color:red'>Sorry, this username is already taken</span>";
}
    else
{
    unF=true;
    document.getElementById("UNMsg").innerHTML="<span style='color:green'>This is available</span>";
}
}
}

//first name checker
function checkFName(n){
var nExp=/^[a-zA-Z\s]{3,15}$/;
    if (nExp.test(n)){
    nF=true;
    document.getElementById("FNMsg").style.color='green';
    document.getElementById("FNMsg").innerHTML='✔';
}
    else
{
    nF=false;
    document.getElementById('FNMsg').style.color='red';
    document.getElementById("FNMsg").innerHTML='✘';
}
}

//last name checker
function checkLName(n){
var nExp=/^[a-zA-Z\s]{3,15}$/;
    if (nExp.test(n)){
    lF=true;
    document.getElementById("LNMsg").style.color='green';
    document.getElementById("LNMsg").innerHTML='✔';
}
    else
{
    lF=false;
    document.getElementById('LNMsg').style.color='red';
    document.getElementById("LNMsg").innerHTML='✘';
}
}

//password checker
function checkpass(x){
var exp=/^[a-zA-z0-9._@&]{8,30}$/;
    if (exp.test(x)) 
{
    document.getElementById("PMsg").innerHTML="<span style='color:green'>Strong</span>";
} 
    else
{ 
    document.getElementById("PMsg").innerHTML="<span style='color:red'>Weak</span>";
}
}
            
//email checker
function checkE(s)
{
var emailExp=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9]+\.[a-zA-Z.]{2,30}$/; 
if(s.length==0)
{document.getElementById("EMsg").innerHTML="";return;}
f5=emailExp.test(s);
    if(f5)
{
    document.getElementById("EMsg").style.color='green';
    document.getElementById("EMsg").innerHTML='✔'; 
}   
   else
{
    document.getElementById('EMsg').style.color='red';
    document.getElementById("EMsg").innerHTML='✘';
    document.getElementById('EMsg').innerHTML = "<span style='color:red'>Should be in proper format</span>";
}   
}

//phone number checker
function checkP(y)
{
var pEx=/^((\+|00)973)?[36][0-9]{7}$/;
    if(pEx.test(y))
{
    pF=true;
    document.getElementById("PhMsg").innerHTML="<span style='color:green'>Valid Number</span>";
}
    else
{
    pF=false;
    document.getElementById("PhMsg").innerHTML="<span style='color:red'>Invalid Number, also country code must be inserted </span>";
}
}
            
function shouldIsubmit()
{
    document.forms[0].JSEnabled.value="true";
    return (unF && nF && pF && lF && f5 && f1 );
}
    </script>

and this is the php checking part:

[<?php
try{
            require('DatabaseLink.php');
            extract($_GET);
            $sql="select * from users where Username='$username'";
            $rs=$db->query($sql);
            if ($r=$rs->fetch())
                echo "true";
            else
                
                echo "false";
            $db=NULL;
}
catch(PDOException $e)
{
        die($e->getMessage());
}
?>][1]

and this is the message shows up although this username is exist in the database! and even if i tried a new username the availability message is not showing up too [1]: https://i.sstatic.net/whk0z.png

Answer 1

Let me assist you so you can continue in building:

Your function checkUName() should look like this, I have edited it a little:

function checkUN(str) {
var unExp=/^[a-zA-Z0-9]{6,18}$/g;       
    if (str.length==0){  document.getElementById("UNMsg").innerHTML="";   return;   }
       
var f1=unExp.test(str);
    if(f1)
    {
    xmlHttp=GetXmlHttpObject(); //use the same function as the previous example
    if (xmlHttp==null)  {   alert ("Your browser does not support AJAX!");   return;   } 
//using ajax
    var url="registerChecker.php";
    url=url+"?username="+str;
    url=url+"&sid="+Math.random(); //another way to prevent caching

    xmlHttp.onreadystatechange=stateChanged; //not function call
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}
    else
    document.getElementById('UNMsg').innerHTML="Username consists of letters and digits and also it must starts with a letter!";
}

the changes I made are in the RegEx pattern: Correct pattern below

var unExp=/^[a-zA-Z0-9]{6,18}$/g;