The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

QapTcha : jQuery captcha system by drag&drop action

Tags :

Plugin rate :

QapTcha is a draggable jQuery captcha system with jQuery UI !

QapTcha is an easy-to-use, simple and intuitive captcha system.
It needs human action instead of to read a hard text and it is a very lightweight jQuery plugin.

In order to work with iPhone and iPad, a file jquery.ui.touch.js has been added in v2.5 !

QapTcha works with PHP5.2 or more cause to the function json_encode() !

How does it work ?

During the DOM building, QapTcha create a hidden input with a random 'name' attribut filled with a random password.
Usually, a bot filled all the input into a form before sending the form.

The purpose of the drop is to empty this random input and set a $_SESSION['qaptcha_key'] variable with this random value in Ajax.

With PHP, just check if the random input exists and is empty and if the $_SESSION['qaptcha_key'] is filled with this random value.
In the PHP file, you just have to do something like :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// check if $_SESSION['qaptcha_key'] created with AJAX exists
if(isset($_SESSION['qaptcha_key']) && !empty($_SESSION['qaptcha_key']))
{
  $myVar = $_SESSION['qaptcha_key'];
  
// check if the random input created exists and is empty
  if(isset($_POST[''.$myVar.'']) && empty($_POST[''.$myVar.'']))
  {
    //mail can be sent
  }
  else
  {
    //mail can not be sent
  }
}
unset($_SESSION['qaptcha_key']);

Even if javascript is disabled, the iQaptcha input will not be create and the PHP control always returns false : (isset($_POST[''.$myVar.'']).
Moreover, the SESSION will not be create and PHP will always returns false : (isset($_SESSION['qaptcha_key']) && $_SESSION['qaptcha_key']).

Implementation: 

1. First, include the CSS & jQuery files

1
2
3
4
5
6
7
8
9
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="QapTcha.jquery.css" media="screen" />
 
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery.ui.touch.js"></script>
<script type="text/javascript" src="QapTcha.jquery.js"></script>

2. add a DIV with the class "qaptcha" into your form

1
2
3
4
5
6
7
8
9
10
11
12
<form method="post" action="">
  <fieldset>
    <label>First Name</label> <input type="text" name="firstname" />
    <label>Last Name</label> <input type="text" name="lastname" />
    <div class="clr"></div>
 
    <!-- Add this line in your form -->
    <div class="QapTcha"></div>
 
    <input type="submit" name="submit" value="Submit form" />
  </fieldset>
</form>

3. PHP control before sending the form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// check if $_SESSION['qaptcha_key'] created with AJAX exists
if(isset($_SESSION['qaptcha_key']) && !empty($_SESSION['qaptcha_key']))
{
  $myVar = $_SESSION['qaptcha_key'];
 
  // check if the random input created exists and is empty
  if(isset($_POST[''.$myVar.'']) && empty($_POST[''.$myVar.'']))
  {
    //mail can be sent
  }
  else
  {
    //mail can not be sent
  }
}
unset($_SESSION['qaptcha_key']);

4. Now, call Qaptcha plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
  $(document).ready(function(){
    // Simple call
    $('.QapTcha').QapTcha();
    
    // More complex call
    $('.QapTcha').QapTcha({
      autoSubmit : true,
      autoRevert : true,
      PHPfile : 'path_to_my_php_file/Qaptcha.jquery.php'
    });
  });
</script>
Options: 
autoSubmit
Boolean
Default : false - if true, auto-submit form when the user has dragged it to the end
PHPfile
String
Default : php/Qaptcha.jquery.php - PHP file path
autoRevert
Boolean
Default : true - Slider returns to the init-position, when the user hasn't dragged it to end
disabledSubmit
Boolean
Default : true - Add the "disabled" attribut to the submit button : true or false
txtLock
String
Default : Locked : form can't be submited - Text to display when form is locked
txtUnlock
String
Default : Unlocked : form can be submited - Text to display when form is unlocked
Screenshots

Comments

Great work

I have JQuery contact form, and I want to implement this captcha, but when I submit my message captcha stay enabled, I want to back in initial state and again to lock my submit button. Do you have some ideas how to do that? Thanks

Hi,
I recently installed this on some of my forms but seems like the protection level is not enough. ı got two spams today. Am i missing something?

@Jovan

You can put QapTcha call on a function then call it to refresh it to initial state



function load_qaptcha()

{

$('.QapTcha').QapTcha({

autoSubmit : true,

autoRevert : true,

PHPfile : 'path_to_my_php_file/Qaptcha.jquery.php'

});

}
But, this will result to a multiple QapTcha instance so you need to tweak the QapTcha.jquery.js then add $this.html(''); before if(opts.disabledSubmit) form.find('input[type=\'submit\']').attr('disabled','disabled'); around line 37 of the script;

Hi, thank you for answer. But i have problem, I can't again submit my captcha, it can't be moved.

Hi Jovan.
Sorry, I'm trying to include the Qaptcha form in my site.
I'm facing with the problem of the "refresh". Did you solve it?
If yes... how? :-)
Thanks a lot.
Regards,
Daniele

I didn't solve problem. :/ If I dont find a solution I will put another captcha.

Thanks Buddy... It works!!!!

Heyi thanks for this plugin.. I had used this.. This was really simple to integrate..

hi, im not having any luck implementing this ?

i get an error message in firefox developer error console

saying

$('.QapTcha').QapTcha(); is not a function

any ideas, im sure its something simple ?

thanks in advance lee

Hi all.
I'm trying to add the "load_qaptcha() function" to reset the application in case of:
- message sent
- message is not sent because some validation failed (eg. mail format not correct)
- page changed (I've the form in the "comment.php" page and if the user changes page, once the user returns on the "comment" page I wish Qaptcha will be reset)

@Jovan: maybe could you help me?
Thanks

Can be useful in JSP!Thanks you.

excellent!!!

could not get it to work... even downloaded example... "$_POST not empty or unexists" or "No SESSION.. Form can not be submitted..."... forever...

I apologize for my previous comment, I just casually read the requirements: "QapTcha works with PHP5.2 or more cause to the function json_encode ()!"
.... And excuse me for online translater =)
Best wishes!

wooow this is graat thank you

For some unknown reason Qaptcha code is conflicting with following Tooltip code and does not display slider image. Any idea.

$(".HelpQuestion,.Tooltip").tooltip({
show: null,
position: {
my: "left top",
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
}
});

Strange..
There is no relation between your code and QapTcha.. Are you sure you don't have an implementation error ? (firebug ?)

Dear Maiki, thanks for your response.
Yes I am sure, as when:

- I remove the given tooltip code OR
- When links using tooltip class are removed

Qaptcha starts to work.

Anyone has an idea ?

I couldn't have a look before a week. If you solve this problem, please let me know :)

Thanks

QUESTION:

Once slider is unlocked, how do we reset Qaptcha on click of a button i.e move slider back to its initial position, display locked message and disable submit button.

Hi,

Actually, it's not possible. Maybe in a future update :)
Thanks

hola a todos, reporto un error cuando se implementa dos catcha en una misma pagina. el autosubmit no funciona.

esta mal la variable "form" en los archivos QapTcha.jquery.js y QapTcha.jquery.min.js

en preferencia me gustaria poder comunicarme con el desarrollador o los desarrolladores.

Muchas gracias.

So what if I have a script that does the following:

1. Get the form page
2. Parse the PHP session id from the response header
3. Post a random number to the server with the session header
4. Post the spam form data + the same random number in the body

Tada... you've got spam.

Simple and nice, but I wouldn't trust this if you risk facing targeted attacks.

You're right, it's not safe.
It took me about 5 minutes to write a shell script with wget to bypass it.
It's obviously a nice concept even if it's not safe.

safe from what? this is used in big companies, this is just a small captcha to small websites...

Exact !
We don't have the pretention to develop the perfect captcha system, with no fails, but it is enough for small websites :)

The point is that this solution is very easily bypassed if someone wanted to. You make no effort of describing this in the plugin description, which is misleading.

Don't get me wrong, I believe this is a very nice plugin (if a bit gimmicky with the slider, could just as well be a button). I just don't want people to use it under the false pretense that it will protect their site from anything more than the most simple random spam attempts.

jQuery('.QapTcha .Slider').draggable('option', 'stop')(null,{position:{left:9999}});

Experiencing an issue in IE8 - when you click on the slider to move it, you jump to the top of the page similar to clicking on an anchor targeted to "#".

Hello,
This works offline on my development (WAMP) server, although when i publish it online (GoDaddy), it doesn't unlock the form when it slides across. I have checked and all the files are there, it's exactly the same as my offline version, it just doesn't work online. any ideas?

Hi,

I think the problem comes from the PHP version installed on your inline server.
If you read the documentation, you can see :

QapTcha works with PHP5.2 or more cause to the function json_encode() !

Regards,

For all distracted users like me.
In the table "OPTIONS:" is the line :
PHPFile String Default : php/Qaptcha.jquery.php - PHP file path

Is not PHPFile is PHPfile, with the small "f"
That's why I could not get the right path to my php file in the options

Maybe with this tip, the owner will change it on table..?

Regards to all
PS:this form is not accepting my email:(

Thanks :)

Great solution. Very user friendly in my opinion. I had some problems with POST, because in my php file, there was nothing in POST. So I changed code and used cookies. Trick with load_qaptcha also works perfectly!
Thanks!

I'm running a WordPress installation and I'm failing to see where to put step 3 - PHP control before sending the form. Please clarify this a bit... What file in my WordPress install would this go into and how would it be implemented?

Hello,
I tried to use qaptcha slider in my form, but it is not working.
When i debbug, if i slide the qaptcha, the code who write in session variable works but if i click on the submit button, the session variable not exist.
I use PHP 5.4. Can you help me ?

Newbi error...
I forgot the session_start() ...

Plugin stopped working with jQuery version 1.9 release. $.browser method is not supported anymore, while the plugin is dependent on it. You can still use the plugin with jQuery version below 1.9.

I had same problem.. You should update Your UI lib to newest (do not use the one added here) and everything works fine (egz. my jQuery v 1.10.1).

Hi,

I'll have a look for this :)

Thanks

Why not used on your web site ?

Because our website in developped with Drupal, and Drupal has is own hidden captcha system :)

Better with callback !

l20 + success: null
l73 + if(opts.success){opts.success(true);}

the 1th question:when i used it in my custom form,it worked very perfect with the default submit mode.but now,i want to use it with the ajax submit mode,then how do i get the session key?

the 2th question:when i draged the slider on the right side,and the slider already stopped,but the txtStatus not worked unless i clicked anywhere on the page!

If you get issues when scrolling with this (the top position changes), simply add !important to .Slider css top value.

I love this QapTcha! it's nice looking and simple to use. But I am new to PHP and Jquery... and I am having problems in designing the contact form the way I want it to look and most of all MAKE IT WORK...
I am looking for someone (Alpixel would be fantastic!) who has the competence and the patience to help me out checking what I have done wrong. I think I am near to the solution, but it's really too much for me in one shot :-)
Thank you in advance!
valeria

HI!
Nice, but sticky!
I got an error:
TypeError: Slider.draggable is not a function
and the slider can't be moved.
Am I missing sth?
Thx!

I also have this bug, trying to drag the slider and nothing happens. Checked the console and it just says .draggable isnt a thing, even though I have JQuery UI and draggable is a thing if I just look at my code..?

I've found a little bug or something. It appears with these options: disabled submit button - YES, autorevert - YES, autosubmit - NO. When you click and drag the slider, it should revert after releasing the mouse button (of course only if it is not dragged to the end). But when you release the mouse button, having the cursor over the form submit button, the slider doesn't revert. It will revert only after one extra click. How to solve it? How to make the slider to revert?

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.3
jQuery U.I
>= 1.3
Current version
4.2
Browsers compatibility
Google ChromeIE 7IE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [65]