The best place to find jQuery plugins !
Welcome on myjqueryplugins,
the best jquery plugins library !
Connect it with GitHub and create your plugin Homepage.
Make known your plugin to the community or link it to your own website !
The best place to find jQuery plugins !
Welcome on myjqueryplugins,
the best jquery plugins library !
Connect it with GitHub and create your plugin Homepage.
Make known your plugin to the community or link it to your own website !
Plugin submitted by alpixel
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() !
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']).
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> |
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> |
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']); |
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> |
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 :
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.
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'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