jQuery Draggable Captcha

Tags: jQuery

A developer from France has come up with this great jQuery plugin for Captcha system. This is unusual from other Captcha systems where you need to type the text displayed in the distorted image which sometimes is kind or irritating. Using the jQuery Captcha plugin user has to just drag the slidder to proceed. You can even setup whether the Submit button should be enabled or disabled depending on the slidder's status. The UI remains CSS driven and hence customizable to suit your applications skin which is great!

The implementation remains sweet and simple too.

Step 1 - Include the CSS and jQuery files

<!--CSS file-->
<link rel="stylesheet" href="jquery/QapTcha.jquery.css" type="text/css" />  

<!-- jQuery and QapTcha file -->
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/QapTcha.jquery.js"></script>

Step 2 - Add a div for QapTcha in the form

<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>

<!-- Div for QapTcha -->
<div id="QapTcha"></div>

<input type="submit" name="submit" value="Submit form" />
</fieldset>
</form>

Step 3 - Call QapTcha plugin

<script type="text/javascript">
<!-- disabledSubmit enables/disables the Submit button on the form -->
$('#QapTcha').QapTcha({disabledSubmit:false});
</script>

 

jQuery QapTcha links

Download

Creator's Website

Add a Comment