How to build a Username Validator

Question

I want to make a ambassador ID validator (LIKE USERNAME VALIDATOR) using php and xmlHttp request in javascript. I wanted to send a xmlHttp request to a php file and that php file should return a integer value like "1" or "0". By reading that with javascript, it should change the message and disable or enable the submit button. So I've written the below code, but the javascript is not functional. the php seems to work perfectly, but having a line-break before the integer. is the line brake is responsible to Ineffectiveness of the javascript?

Here is the javascript,

<script>
function checkambassadorid(str){

if (str=="") {
document.getElementById("availability").innerHTML="";
return;
} 

xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {

if(parseInt(this.responseText) === "0"){
document.getElementById("availability").innerHTML='<span class="text-success">Username Available</span>';
document.getElementById("submitter").disabled = false;

} else {

document.getElementById("availability").innerHTML='<span class="text-success">Username Not Available</span>';
document.getElementById("submitter").disabled = true;
}
xmlhttp.open("GET","ajax.php?data=checkambassadorid&ambassadorid="+str,true);
xmlhttp.send();
}
}
</script>

Here is the HTML,

Ambassador ID:
<input type="number" onkeyup="checkambassadorid(this.value)" id="ambassadorid" name="ambassadorid"> <span id="availability"></span>

And the PHP,

if($_GET['data'] == 'checkambassadorid'){

        mysqli_set_charset($con,"utf8");

        if(isset($_GET["ambassadorid"])){
             $ambassadorid = mysqli_real_escape_string($con, $_GET["ambassadorid"]);
             $query = "SELECT * FROM ambassadordb WHERE ambassadorID = '".$ambassadorid."'";
             $result = mysqli_query($con, $query);
             echo intval(mysqli_num_rows($result));
            }

    }

[Little Bobby](http://bobby-tables.com/) says **[you may be at risk for SQL Injection Attacks](https://stackoverflow.com/q/60174/)**. Learn about [Prepared Statements](https://en.wikipedia.org/wiki/Prepared_statement) with [parameterized queries](https://stackoverflow.com/a/4712113/5827005). I recommend `PDO`, which I [wrote a class for](https://github.com/GrumpyCrouton/GrumpyPDO) to make it extremely easy, clean, and more secure than using non-parameterized queries. Also, [This article](https://phpdelusions.net/pdo/mysqli_comparison) may help you choose between `MySQLi` and `PDO` — GrumpyCrouton, Apr 04 '18 at 20:42
I would if I were you. PDO is lovely. I hate using MySQLi since I started using PDO. Especially with my GrumpyPDO class. — GrumpyCrouton, Apr 04 '18 at 20:55

score 2 · Answer 1 · answered Apr 04 '18 at 20:40

2

I think the main issue, is that you have:

parseInt(this.responseText) === "0"

an integer 0 will never be equal to the string "0", and since you used ===, it is checking type as well as value. I would do:

if(this.responseText.trim() === "0"){

answered Apr 04 '18 at 20:40

dave

62,300
5
72
93

score 2 · Accepted Answer · answered Apr 04 '18 at 21:28

I think @dave nailed your issue on the head, but I'd like to propose a different approach.

Instead of responding with a binary value you could instead return a JSON payload indicating that the username is available (as well as any other pertinent data like suggested names if the requested one is taken)

if($_GET['data'] == 'checkambassadorid'){

    mysqli_set_charset($con,"utf8");

    if(isset($_GET["ambassadorid"])){
         $ambassadorid = mysqli_real_escape_string($con, $_GET["ambassadorid"]);
         $query = "SELECT * FROM ambassadordb WHERE ambassadorID = '".$ambassadorid."'";
         $result = mysqli_query($con, $query);

         $usernameIsAvailable = !(bool)intval(mysqli_num_rows($result));

         $obj = new class{};
         $obj->username = '$_GET["ambassadorid"]';
         $obj->isAvailable = $usernameIsAvailable;
         if(!$usernameIsAvailable) {
             $obj->suggestions = ['generated', 'list', 'of', 'suggested', 'names'];
         }

         print json_encode($obj);
    }
}

Then in your JS

const o = JSON.parse(this.responseText);
if(o.isAvailable) {
    document.getElementById("availability").innerHTML='<span class="text-success">Username Available</span>';
} else {
    document.getElementById("availability").innerHTML='<span class="text-success">Username Not Available</span>';
}
    document.getElementById("submitter").disabled = !o.isAvailable;

You could even include a message with the response to eliminate the if(o.isAvailable) altogether.

How to build a Username Validator

2 Answers2