remote
     synthesis

Validating CAPTCHA with AJAX

Posted on Jun 21, 2006

My CFDJ article is going live today I was told and it covers how to build a form using Peter Farrell's LylaCAPTCHA to prevent misuse of your forms by spammers, but it also shows how to use Rob Gonda's ajaxCFC to validate the CAPTCHA prior to the form submission. Finally, it discusses how to allow your users to request a new CAPTCHA image (in case of illegibility) without requiring a page refresh. The code is available for download via the CFDJ site as well.One change I would like to make to that code that I realized too late is to have the form tag read as follows:

<form id="captchaForm" action="#CGI.SCRIPT_NAME#" method="post" onsubmit="return validateCaptcha(captchaForm.captchaHash.value,captchaForm.captchaText.value);">

Then simply add a "return false;" as the final line in the validateCaptcha() function. Lastly, remove the onclick from the submit button. This will make the call a bit cleaner and still handle the form submission should someone click the enter button. It was my orginal intent to do it this way, but I had a total brain cramp when it came to adding the return keyword before the function call (thanks Rob!).

The URL for the article is http://coldfusion.sys-con.com/read/236003.htm. Let me know if you find the article useful.

Download the attachment.

Comments

Cool stuff Brian.
-Sami

Posted By Sami Hoda / Posted on 06/23/2006 at 12:01 AM

Brian,
I got this working finally with your excellent instructions and download! Thank you very much for this excellent work. I have shared your helpful blog entry with some other folks, mainly at CrystalTech.com's support forum.

Please let me know if there is some wishlist link I can visit :-)
Take care,
Alexis

Posted By Alexis Masters / Posted on 08/23/2006 at 7:01 PM

Hey! Great job on the CFDJ article!

The .zip file containing the sample files seems to be corrupt.

Are you hosting these at another location? or can you email them to me?

Keep up the good work.

Posted By Shaun W / Posted on 09/05/2006 at 1:35 PM

Strange thing...everything seesm to work great, BUT I have to always generate a new captha image for it to take. It will never take the first one...any ideas?

Posted By Michael Appenzellar / Posted on 01/02/2007 at 12:49 PM

Great documentation and implementation I was hoping I would have to tinker with the code to get it to happen but it worked perfectly the first time.

Nice one.

Posted By Dave Fuller / Posted on 02/22/2007 at 7:20 AM

When I leave the code field empty and press submit, it works and I get the 'youhave entered the incorrect cpatcha...'. Than I press submit again with an empty captchtext, than the ajax call returns true and the form submits!!!

Posted By Daniel / Posted on 09/03/2007 at 5:58 AM

I modified the code slightly.... when the ajax call returns false , I call newCaptcha()... that fixes the behaviour I mentioned above

Posted By Daniel / Posted on 09/03/2007 at 9:38 AM

Brain, thanks for the zip download and providing this straighforward example. Worked great. - Ryan

Posted By 3plains / Posted on 12/11/2007 at 1:14 PM

I can't tell you how much spam I have been getting. Thanks for the info!

Posted By Charles / Posted on 10/22/2008 at 1:08 PM