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

2 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.

navya said...
This comment has been removed by a blog administrator.