How to check user name exists or not using jquery

Hi friends!
Whenever we create a registration form we need to check duplicate user name.Today ,I am writing how we can check this duplicate user name using jquery.I hope it will be helpfull for you.

So let's start

We need three things only
1. Web method : I hope you are familiar with web services
2. Registration form
3.jquery .

Also don't forget to add jquery library on your page.

<script src="../script/jquery-1.4.1.min.js" type="text/javascript"></script>


Now let's see how we can check the username with server data through jquery.

1. Take an aspx page with a textbox and span control
<asp:TextBox ID="txtUserNameReg" Width="200px" runat="server"></asp:TextBox>
<span id="Message"></span>

2. create a web method in our .cs page


 
[System.Web.Services.WebMethod]

public static string CheckUserName(string userName)

{
string returnValue = string.Empty;

string conString = ConfigurationManager.ConnectionStrings["Connection"].ConnectionString;

SqlConnection sqlConn = new SqlConnection(conString);

try

{
SqlCommand sqlCmd = new SqlCommand("CheckUserName", sqlConn);

sqlCmd.CommandType = CommandType.StoredProcedure;

sqlCmd.Parameters.AddWithValue("@UserName", userName.Trim());

sqlConn.Open();
int success = int.Parse((sqlCmd.ExecuteScalar().ToString()));

if (success == 1) //shows user name not available

{

returnValue ="Not Available";

}
else if (success == 0)//shows user name available is available

{

returnValue = "Available";

}

}
catch

{

}
finally

{

sqlConn.Close();

}
return returnValue;

} 




Now it's time to use lovely jquery function to check and display message

Paste this on aspx page in head master content
<script type="text/javascript" >

var $j = jQuery.noConflict(); //u can use this when using ajax for no confliction.

var msgbox = $j("#status");

$j(document).ready(function() {

$j("#<%=txtUserNameReg.ClientID %>").blur(function() {

$j.ajax({





type: "POST",

url: "Registration.aspx/checkUserName",

data: "{'userName':'" + $j("#<%=txtUserNameReg.ClientID %>").val() + "'}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function(message) {

if (message.d =='Available') {



$j("#<%=txtUserNameReg.ClientID %>").removeClass("notavailablecss");



$j("#<%=txtUserNameReg.ClientID %>").addClass("availablecss");

$j("#status").html('<img src="../Images/a.png"> <font color="Green"> Available </font>');







$j("#<%=Button1.ClientID %>").removeAttr('disabled');//enable submit button is available





}
else {



//





$j("#<%=txtUserNameReg.ClientID %>").removeClass("availablecss");



$j("#<%=txtUserNameReg.ClientID %>").addClass("notavailablecss");

$j("#status").html('<img src="../Images/n.png"> <font color="red">Not Available </font>');

$j("#<%=Button1.ClientID %>").disabled=true;

$j("#<%=Button1.ClientID %>").attr("disabled", "true");//disable submit button is  not available



}

},

error: function(errormessage) {



$j("#status").html(errormessage.responseText);

}

});

});

});





</script>



at last use this css

<style type="text/css">

#status

{

font-size:11px;

margin:10px;

}

.availablecss

{

background-color:#CEFFCE;

border:1px solid green;

}

.notavailablecss

{

background-color:#FFD9D9;

border:1px solid red;

}
</style>

Thats it. How it is simple? Just try my code and enjoy jquery with server side data.

Any confusion? Please mail me: mkumar.soft@gmail.com

If  you like my post,Please give your comments .

enjoy coding ......