Solved

Implementing a 'live' username check during signup form with jQuery & Coldfusion

Posted on 2010-09-14
4
653 Views
Last Modified: 2012-05-10
Hi Folks,

I've tried a few scripts I've found online, however I'm struggling to make any of them work for me.  I have a simple form with 3 fields - name, username and email.  I need to accomplish the following;

- Validate input on the name field (this can be as simple as making sure it's not left empty)

- Check username as it's entered - I'm thinking something very similar to the twitter signup form here.  I have a div element alongside that holds the message, with various classes to style it.  So, initially I would show a div with 'grey' class and a message 'choose a username'.  As the user types, the database is checked to see if the name is already taken and returns the message and div styling as appropriate.  If the name is available, I also have text below this I'd like to update to show how the username will be displayed (see form code/layout below for explanation).

- Validate Email address is correctly formatted.

- Disable the form submit until all of the above are ok

I can accomplish the validation and username checks *after* form submit (using simple <cfif>, but I'm struggling to figure out how to do this before form submit.

Any pointers much appreciated!
<!--- Current Form --->
<form action="">
<fieldset>
<label for="name"><span>Full Name</span>
<input type="text" id="name" name="name" class="input" />
</label>
<div class="message grey">Enter your Name</div>
							
							<label for="username"><span>Username</span>
<input type="text" id="username" name="username" class="input" />
</label>
<div class="message grey">Choose Username</div>
<p>Your public profle will be http://www.site.com/CHOSENUSERNAME</p>
							<label for="email"><span>Your Email</span>
							<input type="text" id="email" name="email" class="input" />
</label>
						
							<input type="submit" value="REGISTER" class="submit" />
</fieldset>
</form>

Open in new window

0
Comment
Question by:RedBullLee
4 Comments
 
LVL 16

Expert Comment

by:duncancumming
ID: 33679333
Ok, you're going to have to use Javascript to achieve the client-side validation.  One way might be to use the jQuery framework.  Or there are other frameworks, or you could try using ColdFusion's built-in validation.  Similarly with the username check, you'll need to do an AJAX request to find out if it's taken.

Here's a nice example:
http://jqueryfordesigners.com/using-ajax-to-validate-forms/

If you go down the jQuery route you might want to use the validation plugin with it.
http://docs.jquery.com/Plugins/Validation
0
 
LVL 4

Expert Comment

by:sandy12879
ID: 33679447
<input type="text" id="username" name="username" class="input" />
<span></span>
 
<script language="javascript" type="text/javascript">
    jQuery(function(){
      jQuery('#username')
        .data('timeout', null)
        .keyup(function(){
            clearTimeout(jQuery(this).data('timeout'));
            jQuery(this).data('timeout', setTimeout(formname, 2000));
        });
    });
</script>

Not tried the above piece of code but your approach should be on KEY up if you want to validate the code without submitting the code.
Let me know if it helps
0
 
LVL 6

Accepted Solution

by:
reiters earned 500 total points
ID: 33693083
I wrote this with no testing so I'm sure it full of typos.  It's just to give the general idea.  I can only attach one snippet so this is 2 files in one snippet.
<!-- html page -->

<script type="text/javascript">
	name_ok = 0;
	user_ok = 0;
	email_ok = 0;
	
	function test_input(check) {
		switch(check) {
			case 'name':
				$.ajax({ url: 'test_form.cfm?field=name&user_value=' + escape($('#name').val()),success: cache: false, function(result){
						if (result == 1) {
							name_ok = 1;
							$('#name_response').html('good name');
							}
						else {
							name_ok = 0;
							$('#name_response').html('bad name');
							}
						}
					});
				break;
			case 'uid':
				$.ajax({ url: 'test_form.cfm?field=uid&user_value=' + escape($('#uid').val()),success: cache: false, function(result){
						if (result == 1) {
							uid_ok = 1;
							$('#uid_response').html('good uid');
							}
						else {
							uid_ok = 0;
							$('#uid_response').html('bad uid');
							}
						}
					});
				break;
			case 'email':
				$.ajax({ url: 'test_form.cfm?field=email&user_value=' + escape($('#email').val()),success: cache: false, function(result){
						if (result == 1) {
							email_ok = 1;
							$('#email_response').html('good email');
							}
						else {
							email_ok = 0;
							$('#email_response').html('bad email');
							}
						}
					});
				break;
			}
		}
	
	function form_submit() {
		if (name_ok && user_ok && email_ok) {
			submit();
			}
		else {
			alert('you must correctly fill out the entire form');
			}
		}
</script>

<form action="foo.cfm" method="post">
	name: <input type="text" name="name" id="name" value="" onchange="test_input('name')"><span id="name_response"></span><br />
	user id: <input type="text" name="uid" id="uid" value="" onchange="test_input('uid')"><span id="uide_response"></span><br />
	email: <input type="text" name="email" id="email" value="" onchange="test_input('email')"><span id="email_response"></span><br />
	<input type="button" value="Submit" onclick="form_submit();">
</form>






<!-- test_form.cfm --->

<cfsetting enablecfoutputonly="yes">

<cfparam name="url.field" default="oops">
<cfparam name="url.user_value" default="">

<cfset result = 0>

<cfswitch expression="#url.field#">
	<cfcase value="name">
		<cfif len(url.user_value) gt 0><cfset result = 1></cfif>
	</cfcase>
	<cfcase value="uid">
		<cfquery name="foo">
			select count(uid) as user_count
			from user_table
			where uid = '#url.user_value#'
		</cfquery>
		<cfif foo.user_count eq 0><cfset result = 1></cfif>
	</cfcase>
	<cfcase value="email">
		<cfif isvalid('email',url.user_value)><cfset result = 1></cfif>
	</cfcase>
</cfswitch>

<cfoutput>#result#</cfoutput>

Open in new window

0
 

Author Comment

by:RedBullLee
ID: 33719201
Apologies to all for the lateness of my reply - I had to go away for a few days.

Before leaving, I managed to come up with something that worked using cfdiv binds - not ideal, but did the trick.

Since returning, I've gone through the answers here and reiters suggested code brought a few improvements to my own.

I will therefore select that as the solution.  Thanks to all for your input.
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is an updated version of a post made on my blog over 3 years ago. It is unfortunately, still very relevant as we continue to see both SQLi (SQL injection) and XSS (cross site scripting) attacks hitting some of the most recognizable website and …
Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…
Are you ready to implement Active Directory best practices without reading 300+ pages? You're in luck. In this webinar hosted by Skyport Systems, you gain insight into Microsoft's latest comprehensive guide, with tips on the best and easiest way…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question