The Ashes

Technology, Science and other news
April 10, 2009

Instant Email/Username Validation Using ASP.NET and jQuery

Posted by : admin
Filed under : General

Instant username availability validation is a feature
a lot of my clients have been requesting lately.  Basically it is a function that checks to see if a username or email address is available instantly, as it is being typed.

 

My internet life matured in a time when JavaScript was the
devil.  I
have avoided using it in development for as long as I remember. I
still
heavily avoid it because of how fickle some of the browsers
handle it, and because elegance is time consuming.  Most sites
that reconfigure themselves with AJAX fail to execute properly — if
you are going
to use JavaScript, take the time and do it right.  However, I am also
aware of how well some of the frameworks out there have overcome the
weaknesses of cross browser compatibility.

 

My favorite is jQuery, it is very easy to learn and simple to use.  To start we are going to need three elements:

 

  1. the text box to
    validate
  2. the JavaScript to call the validation
  3. the requested file
    where the server side validation will take place

First the file we are going to make a request to (I am going to use a
generic (.ashx) handler):

Start by creating a new Generic Handler and
name it EmailCheck.ashx.  Visual Studio will generate some default
code, we can kill the Response.Write("Hello World") as we are going to
use our logic here to check if the passed username or email address
already exists in our system.  We are left with

<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;

public class Handler : IHttpHandler {
   
    public void ProcessRequest (HttpContext context)
    {
        context.Response.ContentType = "text/plain";
    }
 
    public bool IsReusable
    {
        get { return false; }
    }
}

I
have a method defined in my Members object to determine if the email
is available or not, which I can simply reference with
ABC.Members.IsEmailAvailable(email).  I will write up a quick inline
function as an example. This function simply takes in an email address
(or username, or
whatever else you need to validate) and returns true if it is not in
use and false if it is.

private bool
IsEmailAvailable(string email)
{
            OleDbDataReader reader;
            OleDbCommand cmd = new OleDbCommand( "SELECT TOP 1 ID FROM Members WHERE Email = ?", Globals.DBConnectionString );
            cmd.Paramaters.AddWithValue( "Email",email );

            bool isAvailable = false;

            try
            {
                cmd.Open();

                reader = cmd.ExecuteReader();

                if (!reader.Read())
                    isAvailable = true;

                reader.Close();
            }
            catch (Exception ex)
            {
                ErrorHandler( ex );
                return false;
            }
            finally
            {
                cmd.Close();
            }

            return isAvailable;
}

That
will be good enough for our purposes.  It can be adapted to better suit
your application, using your DB provider or what have you. 

Next
we just need to add the logic to the ProcessRequest function.  We need
to check the query string to see if we got an email address, if we did
indeed get one then we can query the database and make the required
response.

    public void ProcessRequest (HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        if (context.Request.QueryString["Email"] == null)
            return;

        string email = context.Request.QueryString["Email"].ToString();

        if (!IsEmailAvailable(email))
        {
            context.Response.Write("Sorry, your email address is already in use.");
            return;
        }
    }

That
is all there is to this side of the request.  You can test it out by
referencing the handler directly. 
http://localhost:xxxx/EmailCheck.ashx?Email=test@test.com.  If the
email address is not in use, you will see nothing on the response and
if it is in use you will see a plain text message of "Sorry, your email
address is already in use."

For this next part you are going to need to download jQuery.  I am currently using version 1.3.2 which you can download directly here
However, you may want to check the main site for more recent versions. 
The first time that I worked with jQuery I had an extremely unorganized
site with multiple unorganized developers. We had MooTools and
Prototype and had some conflict issues.  I found a no conflict feature
of jQuery that I have used every since.  I just add to the last line of
the jQuery file

var $j = jQuery.noConflict();

What this means that in my code you will see $j("jquery").something; instead of the standard $("jquery").something;.

On the new form page we need to create two things:

  1. the CheckEmail(email) JavaScript function
  2. a container for the error message


I
created a div with the ID of "emailinusebox".  The function is pretty
simple: we need to validate the email address.  If we don't have a
valid email address, there is no reason to waste time or resources with
a database request.  I admit, I kept it simple and lazy.  I just check
to see if the string contains an @ and a . (dot).  If it meets those
requirements, we can go ahead and check the database.  I use the jQuery.load function which will perform a GET to the ashx handler we created above.

function CheckEmail(email)
{
    $j("#emailinusebox").html("");   

    if(email.toString().indexOf("@") == -1)
        return;
        
    if(email.toString().indexOf(".") == -1)
        return;
    
    $j("#emailinusebox").load("EmailCheck.ashx?Email=" + email);
}

You can use CSS to style the error box however you like.  I simply have

#emailinusebox {font-weight:700;color:#f00}

Now for the final step, the easy part.  We need our text box,

<asp:TextBox MaxLength="100" runat="server" ID="tEmail"></asp:TextBox>

And
we need to apply the onkeyup function to it in order to call our
validation function.  I apply it in the .cs file by adding an attribute
to it.

this.tEmail.Attributes.Add("onkeyup", "javascript:checkemailcode(this.value);");

There
are other (likely better) ways to do this.  I believe the best practice
is to assign it using jQuery's (document).ready function, but I prefer
this way.  I find it easier for me to manage, mainly because I don't
trust designers to maintain the integrity of my .aspx files.  When all
is said and done, we have a very simple looking error message.  You can
add flashy bells and whistles and icons, but here is how it looks in
its current form:

 

Tags :

No Comments

(required)
(will not be published) (required)
(opitional)

cciash.com EN ES IT DE PT CZ FR RU
June 2018
M T W T F S S
« Sep    
 123
45678910
11121314151617
18192021222324
252627282930  

Pages

Categories

Resources

There are many online poker site where you can play but at poker.hk you can play the poker games with all the knowledge you need related to the game with the poker school available in both the English and Chinese language.

Super Casino

Now you can bet on any sports and any sporting events from all the comfort from your home. Bet770 allows you to bet on any events and match with in just 3 clicks. They also offers great odds on football betting for every premier and champions league match. Get £50 free in bets when you register.

Bingo770, offering best online bingo games with £7.70 free no deposit Bonus!