angle

Update to Check username availability with ASP.NET AJAX

I found a slight error in the code from the previous article: Check Username availability with ASP.NET AJAX. In the CheckEmail and CheckUsername functions i left off the curly braces that should be around the else clause. Without them the javascript will not work in Firefox. Also you do need to use ClientID to get the client ID of the controls. UniqueID will only work in IE and not in FF. In IE the ajax loading gif will stay on the same line as the messages indicating whether theusername/email address is being checked. In Firefox CSS is needed to get the image to line up on the same line. I used vertical-align: 58%; for firefox. But IE will not obey this rule so i used IE conditional comments and this CSS vertical-align: middle;. Corrected code is below.

 

<Services.WebMethod()> Public Shared Function CheckUserName (ByVal userName As String) As Boolean
        ' System.Threading.Thread.Sleep(2000) Use this to sleep so we can see the cool ajax gif play for a bit
        If (Membership.GetUser(userName) IsNot Nothing) Then
            Return True
        Else : Return False
        End If
    End Function
 
 <Services.WebMethod()> Public Shared Function CheckEmail(ByVal email As String) As Boolean
        System.Threading.Thread.Sleep(5000)
        If (Membership.GetUserNameByEmail(email) IsNot Nothing) Then
            Return True
        Else : Return False
        End If    
   End Function

 

Username.Attributes.Add("onblur", "CheckUserName()")
Email.Attributes.Add("onblur", "CheckEmail()")    
 var txtUserName;
    var txtEmail; 

    function pageLoad()
    {
         txtUserName = $get("<%=Username.ClientID %>"); 
         txtEmail = $get("<%=Email.ClientID %>");  
     }

 


function CheckUserName()
    {
        if (txtUserName.value.length > 0)
        {
            $get("spanUsername").innerHTML = "Checking Username Availability...<img id=imgWaiting src=../images/ajax-loader.gif>";
            $get("spanUsername").style.color = "red";
            $get("spanUsername").style.fontWeight = "bold";
            PageMethods.CheckUserName(txtUserName.value, OnCheckUserName);
           
         }

         else           
      {
         $get("spanUsername").innerHTML= "";          
      }

               
    }
 

 

 function OnCheckUserName(unavailable)
    {
        if (unavailable == true)
        {
            $get("spanUsername").innerHTML = "Username Unavailable";
            $get("spanUsername").style.color = "red";
            $get("spanUsername").style.fontWeight = "bold";
                   
        }
        else if (unavailable != true)
        {
           
            $get("spanUsername").innerHTML = "Username Available";
            $get("spanUsername").style.color = "green";
            $get("spanUsername").style.fontWeight = "bold";                 
        }
    }   

 

function CheckEmail()
    {
        if (txtEmail.value.length > 0)
        {
            $get("spanEmail").innerHTML = "Checking for duplicate email...<img id=imgWaiting src=/images/ajax-loader_small.gif>";
            $get("spanEmail").style.color = "red";
            $get("spanEmail").style.fontWeight = "bold";
            PageMethods.CheckEmail(txtEmail.value, OnCheckEmail);
                       
        }
         else           
        {
         $get("spanEmail").innerHTML= ""               
        }        
    }
 
 
 
 
function OnCheckEmail(duplicate)
    {
        if (duplicate == true)
        {
            $get("spanEmail").innerHTML = "Email has already been used";
            $get("spanEmail").style.color = "red";
            $get("spanEmail").style.fontWeight = "bold";                        
        }
        else if (duplicate != true)
        {
            $get("spanEmail").innerHTML = "Nonduplicate Email Address";
            $get("spanEmail").style.color = "green";
            $get("spanEmail").style.fontWeight = "bold";                        
        }
    }
 

 

Download the source files