In this article I will explain with an example, how to check Username availability i.e. check whether Username exists in database or not using JavaScript XML HTTP function and AJAX and in ASP.Net with C# and VB.Net.
This article will illustrate how to check Username availability in database on Registration Form by making AJAX call to database using JavaScript XML HTTP function and WebMethod in ASP.Net with C# and VB.Net.
 
 
Database
I have made use of the following table Users with the schema as follows.
Check whether User Name already exists using JavaScript and XmlHttp
 
I have already inserted few records in the table.
Check whether User Name already exists using JavaScript and XmlHttp
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 
HTML Markup
The following HTML Markup consists of an HTML TextBox, an HTML Button and an HTML SPAN element.
The HTML TextBox has been assigned an onkeyup event handler which triggers the ClearMessage JavaScript function.
The HTML Button has been assigned an onclick event handler which triggers the CheckAvailability JavaScript function.
Username:
<input id="txtUsername" type="text" onkeyup="ClearMessage()" />
<input id="btnCheck" type="button" value="Show Availability" onclick="CheckAvailability()" />
<br />
<span id="message"></span>
 
 
Stored Procedure
The following Stored Procedure will be used to check whether the supplied Username exists in the database or not.
It will return TRUE if the Username does not exists in database i.e. it is available and it will return FALSE if the Username exists in the database i.e. it is already in use.
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
 
CREATE PROCEDURE [dbo].[CheckUserAvailability]
      @UserName VARCHAR(50)
AS
BEGIN
      SET NOCOUNT ON;
      IF NOT EXISTS(SELECT UserName FROM Users
                    WHERE UserName = @UserName)
      BEGIN
            SELECT 'TRUE'
      END
      ELSE
      BEGIN
            SELECT 'FALSE'
      END
END
GO
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
 
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
 
 
The Web Method
The following Web Method will be called from the Client side using JavaScript XML HTTP function.
The Web Method calls the CheckUserAvailability Stored Procedure and returns the value returned from the Stored Procedure back to the Client.
C#
[System.Web.Services.WebMethod]
public static bool CheckUserName(string username)
{
    bool status = false;
    string constr = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
    using (SqlConnection conn = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("CheckUserAvailability", conn))
        {
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@UserName", username.Trim());
            conn.Open();
            status = Convert.ToBoolean(cmd.ExecuteScalar());
            conn.Close();
        }
    }
    return status;
}
 
VB.Net
<System.Web.Services.WebMethod()> _
Public Shared Function CheckUserName(ByVal username As String) As Boolean
    Dim status As Boolean = False
    Dim constr As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
    Using conn As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand("CheckUserAvailability", conn)
            cmd.CommandType = CommandType.StoredProcedure
            cmd.Parameters.AddWithValue("@UserName", username.Trim())
            conn.Open()
            status = Convert.ToBoolean(cmd.ExecuteScalar())
            conn.Close()
        End Using
    End Using
    Return status
End Function
 
 
Client Side implementation
The CheckAvailability JavaScript function gets called when the Button is clicked, it first fetches the Username to be checked for availability from the TextBox and then calls the WebMethod using the JavaScript XML HTTP function.
When the response is received, based on whether the Username is available or in use, appropriate message is displayed in the HTML SPAN element.
The ClearMessage JavaScript function gets called when user types in the TextBox, it simply clears the message displayed in the HTML SPAN element.
<script type="text/javascript">
    function CheckAvailability() {
        var username = document.getElementById("txtUsername").value;
        var request;
        if (window.XMLHttpRequest) {
            //New browsers.
            request = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            //Old IE Browsers.
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (request != null) {
            var url = "Default.aspx/CheckUserName";
            request.open("POST", url, false);
            var sendStr = "{username: '" + username + "'}";
            request.setRequestHeader("Content-Type", "application/json");
            request.onreadystatechange = function () {
                if (request.readyState == 4 && request.status == 200) {
                    var messages = document.getElementById("message");
                    if (JSON.parse(request.responseText).d) {
                        //Username available.
                        message.style.color = "green";
                        message.innerHTML = "Username is available";
                    }
                   else {
                        //Username not available.
                        message.style.color = "red";
                        message.innerHTML = "Username is NOT available";
                    }
                }
            };
            request.send(sendStr);
        }
    }
 
    function ClearMessage() {
        document.getElementById("message").innerHTML = "";
    };
</script>
 
 
Screenshot
Check whether User Name already exists using JavaScript and XmlHttp
 
 
Demo
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads