jQuery Fancy Draggable Captcha

Here is a jQuery example for a captcha in a registration form. In order to pass the “Are you human” test, the user has to drag the numbers from 1 […]

By cody in Playground on September 8, 2009

From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.

Here is a jQuery example for a captcha in a registration form. In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 into order.

Here you can download the source as a ZIP file: Captcha ZIP

DEMO

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

cody

Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

captcha draggable registration

Master JavaScript Animation with GSAP – Perfect for Beginners! Get full, free access to 34 video lessons, step-by-step projects, and hands-on demos. Enroll for free →

Feedback ¹⁰

Comments are closed.

ellisgl September 9, 2009 at 03:14

how well does it degrade?
- cody September 9, 2009 at 07:27
  
  Hi ellisgl, not good 🙂
  I will soon post a new one that has support for users that don’t have JavaScript enabled.
  greets
charles September 9, 2009 at 07:08

yeah, and how well does it works when you have ur monitor turned off?
I like it,
regards
Evan Byrne September 9, 2009 at 15:29

I was wondering, would this really stop a bot from posting on your site? After all the bot wouldn’t even see the javascript it would just post directly to your server-side script.

Unless you somehow combine server-side functionality with the javascript this really just gives you a false sense of security.
- cody September 9, 2009 at 16:04
  
  Hi Evan,
  yes you are right, there must be some server side that checks that. In this post I was just trying to show another possibility for a captcha. I didnt consider the server side part here. I would change the script in a way that the user has to order the numbers in the same way of another sequence that would be displayed for him/her. That value (of the sequence that he/she has to simulate) would be stored for example in some session variable that would be then matched with the user’s sequence. Another improvement would be to put the numbers as pictures and not only from 1 to 6.
  Greetings
Rufor September 12, 2009 at 21:29

Thanks for article. Everytime like to read you.
Rufor
Alexsandro December 11, 2009 at 15:07

It´s not acessible, is it?!!
Pablo Marlin October 5, 2010 at 09:54

Hey quite good blog!! Man .. Attractive .. Remarkable .. I am going to bookmark your blog and have the rss feeds also…
e11world March 14, 2011 at 20:54

I like this idea but it still seems to waste the users’ time to re-arrange that. I would love to see things more along this line http://www.myjqueryplugins.com/QapTcha/demo
Simpler for the user (just not sure which is better for security reasons)
boggz September 22, 2011 at 04:32

i tried this one. but not working on IE7. keeps on saying you’re not a human. any idea to solve this? thanks!

cody

Pixel Distortion Effect with Three.js

Some Ideas for Fullscreen Image Slideshow Animations

Creating a Typography Motion Trail Effect with Three.js

Stay in the loop: Get your dose of frontend twice a week

Feedback 10

Feedback ¹⁰