Wednesday, April 1, 2009

Check availability of user name on a registration / Signup form

While registering a new user on your site, the idea to check the availability of user name is of great use.

It saves the time of registering user and makes a great value for users.

You need to do following things in order to achieve that-

1) Include the below give javascript file in your project
2) Identify the event on which the availability is to be checked (better if you give a seperate button or simply a href for it), in my code i've used a href to check the availability.
3) Areas and messages to be displayed (you can customize the messages to be displayed)
4) On code behind define a [WebMethod] for checking the availability










JScript File


var usernameCheckerTimer;

var isavailable=false;
function usernameChecker(username)
{

clearTimeout(usernameCheckerTimer);
if (username.length == 0){
{

//You can customize the mesage for blank user name
$get("spanAvailability").innerHTML = "<span style='color: Red;'>Can't be blank";


document.forms[0].txtLoginId.focus();
}
else
{
//You can customize the mesage for Checking..
$get("spanAvailability").innerHTML = "<span style='color: #000;'>Checking...";

usernameCheckerTimer = setTimeout("checkUsernameUsage('" + username + "');", 750);

}
}

function checkUsernameUsage(username)
{
// initiate the ajax pagemethod call
// upon completion, the OnSucceded callback will be executed
PageMethods.IsUserAvailable(username, OnSucceeded);
}

// Callback function invoked on successful completion of the page method.
function OnSucceeded(result, userContext, methodName)
{
$get("spanAvailability").innerHTML = "";
if (methodName == "IsUserAvailable")
{
if (result == true)
{
//You can customize the mesage for Available
$get("spanAvailability").innerHTML = "<span style='color: DarkGreen;'>Available";

isavailable=true;
}
else
{
//You can customize the mesage for NotAvailable
$get("spanAvailability").innerHTML = "<span style='color: Red;'>Unavailable";

document.forms[0].txtLoginId.focus();
isavailable=false;

}


}
}


The link for checking the availability

<a href="#" onclick="usernameChecker(document.getElementById('txtLoginId').value);">Check Availability?/a>


The webmethod for your code behind page

[WebMethod]
public static bool IsUserAvailable(string username)
{
MembershipUser usr = Membership.GetUser(username);
return (usr == null);
}


Don't forgrt to include
using System.Web.Services;









Cheers

3 comments:

Akash said...

Good approach, However I prefer not using java script and would rather use a simple database call using Ajax update panel to check and show availability of the username.

Naviya Nair said...

Very interesting and good Explanation on asp .net ..
ASP.NET Training
ASP NET Training
ASP.NET Online Training


C# Training
C# Online Training
C-Sharp Training
Dot Net Training in Chennai
.Net Online Training
ASP.NET Training

Naviya Nair said...
This comment has been removed by a blog administrator.