Post a Comment on:

JQuery Username Check Tutorial

Leave this field empty:

Search Altered Pixels.net::

JQuery Username Check Tutorial

January 8, 2010 · No CommentsComments Feed

In this tutorial, I'm going to show you how easy it is to create a username check utility directly inside your web-based form, using JQuery & ColdFusion.

This tutorial involves a user who is filling out a form and choosing a user name. You as the Developer (or Site owner)want  to check in "real time" (after the blur event on the username input) that the name is unique. While this can be accomplished using Jörn Zaefferer's Validation Plugin for jQuery. This plugin is essentially the defacto standard for doing validations via jQuery. It can be implemented very easily to do the most basic validations, but it can also be extended to do any number of complex validations.

That having been being said, I thought it still might be worthwhile to see a quick example of how to build out that specific functionality from scratch. How can we use jQuery to give a user real-time feedback as to whether or not a username is available? We're going to start be creating our HTML Form.

 

The Form HTML:

We've got a standard form, with a few styles applied. After the username input field, there's a span with a message indicating "Sorry, that username is taken". By default that message is hidden via CSS. The class "usernameResponse" has a property of display:none.

The jQuery Scripting:

The first line includes the jQuery library from Google. Then the fun begins.

The field that triggers the event has an ID attribute of "username", and we want the event to trigger on blur. When the blur event happens, we call the built in .ajax() method. The method takes a few parameters:

 

  • type: In this case, we're going to POST data to the server. GET is an option as well.
  • url: The URL to post to. We're sending data to a CFC method (the method is passed as a URL parameter and the method's access attribute is set to "remote").
  • data: key/value pair of data to post. We're sending a variable of "username" and passing the value of the username input field.
  • success: On a successful post, a callback function to fire. The function takes an argument (response) which is the value returned from the post. In this case it's a recordcount. The method simply does a query to check if the username exists, and returns the recordcount. If it's 0 (no matching records), ensure that the span with the error message is hidden and make sure the submit button is enabled. Otherwise, if it's any value other than 0 (the username exists), display the error message and disable the submit button.

That's it. Bear in mind that any client-side validation should be performed as a courtesy to the user only. Client side validation should NEVER be considered a substitute for server side validation. If the user doesn't have JavaScript enabled, this form should still degrade nicely. The span with the error message will be hidden by default (via CSS), and since the blur() event will never fire, there's no indication to the user that they're "missing out" on anything. But on the server side, you would still need to do the proper validation to ensure a unique username.

If you want to run the sample, it involves 2 files (posted below for your copying-and-pasting pleasure). A cfm file and a CFC. There's no ColdFusion happening in the .cfm, so it could just as easily be an .html for the purposes of this example. The CFC simulates a database call by creating a query via queryNew(). Also, for the purposes of this example, the CFC should be in the same directory as the calling .cfm page.

The names John, Paul, George, and Ringo will trigger the error message.

The CheckUser.cfc :

The Complete Form Source (checkuser.cfm):

This entire tutorial could easily be ported over to any other Language, such as PHP or ASP. Now, without further ado, you have a 'Real-Time' Username check utility in your form.

 

Tags: ColdFusion Tutorials · JQuery Tutorials · JavaScript Tutorials