Question

I want to know how can I validate using Javascript that if user has entered any username at the time of creating an account is already present in database and ask user to type any other username?

Answer 1

1. Attach listener for blur event for <input /> element.
2. Using AJAX send request to the server (with field value as parameter)
3. On the server side check whether given username is already in use or not
4. Based on server’s response display (or not) This username is already in use message

jQuery (I’m too lazy for pure JS) + PHP sample code:

<form ...>
    ...
    <input type="text" name="username" id="input-username" />
    <p class="error"></p>
    ...

$("#input-username").blur(function() {
    $.post("/check-username.php", { username: $(this).val() }, function(data) {
        if ("0" == data) { /* username in use */
             $(this).next("p").text("This username is already in use.</p>");
        } else {           /* username is fine */
             $(this).next("p").empty();
        }
    });
});

<?php

$username = $_POST['username'];

// check whether given username exists in database
$usernameExists = ...;

echo $usernameExists ? '0' : '1'; // 0 if exists, 1 if not.