- Overview
- Documents
- Demos
This is a jQuery plugin by which you can easily implement some captcha codes in four different fun and game like captcha models
Features:
- Well documented
- Easy to use
- All screen devices
- All browsers support
- Four different models
- In 3 sizes ( small, medium, large )
- Callback functions
- Bootstrap supported
- Touch, drag & drop events
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" type="text/css" href="PATH/TO/STYLE/FILE/style/style-captcha.css" /> <link rel="stylesheet" type="text/css" href="PATH/TO/STYLE/FILE/style/style-captcha-rtl.css"> <script type="text/javascript" src="PATH/TO/JS/FILE/src/js/jquery-1.9.1.js"></script> <!-- Required --> <script type="text/javascript" src="PATH/TO/JS/FILE/src/js/jquery-ui.js"></script> <!-- Required --> <script type="text/javascript" src="PATH/TO/JS/FILE/jquery-captcha-1.0.0.js"></script> <!-- Plugin -->
2. HTML
<form action="your_php_file.php" class="register active" method="post"> <h3>Register</h3> <div class="column"> <label>First Name:</label> <input type="text" name="fname" id="fname" value="John"/> </div> <div class="column"> <label>Last Name:</label> <input type="text" id="lname" value="Doe"/> </div> <div class="bottom"> <div id="captchaIdColor"></div> <!-- Captcha code goes here --> <div class="clear"></div> <button type="button" class="btn" name="register" >Register</button> <button type="button" class="btn" onclick="$('#captchaIdColor').CaptchaReset(); /* for refreshing captcha*/" >Refresh</button> </div> </form>
Choose a tag with a unique ID in your form or wherever you like to use the captcha:
As you see in the following example we gave a div inside the form the id of "captchaIdColor"
3. JAVASCRIPT
$("#captchaIdColor").CaptchaColor("NameOfYourAnswerHiddenInput_Color","PATH/TO/CAPTCHA/BUILDER/FOLDER/captchaBuilder", options);
Now you should enter the ID that we mentioned above like the following line in your body.
Then you should assign a name ( id ) for the first argument. For example; NameOfYourAnswerHiddenInput_Color
This will be the hidden input id which the plugin makes and puts the captcha asnwer in it.
4. PHP (Server script)
<?php session_start(); /* You must start session. This is Required for checking captcha */ if(isset($_POST['register'])) { require_once 'PATH/TO/CAPTCHA/BUILDER/FOLDER/captchaBuilder/captchaSecure.php'; $secret = new captchaSecure(); if($secret->check($_POST['NameOfYourAnswerHiddenInput_Color'])) { // If captcha is true // Write your surce code echo 'Hello '.$_POST['fname'].' '.$_POST['lname']; } else { echo "Captcha is false"; } } else { echo "Form is not sent"; } ?>
In your php file to which the form data will be sent ( "your_php_file.php"):
In order to check whether the captcha answer is true or false you should firstly include the session_start() method at the beginning of codes
Then include captchaSecure.php file which is in captchaBuilder folder and initialize the captchaSecure class
5. OPTIONS
Remember the third argument we talked above. You can set these below parameters in options argument otherwise the default will be set as your captcha options.
Params | Type | Example | Description | Default |
---|---|---|---|---|
border | Boolean | false | Square border show or not | true |
borderColor | String | 666666 | Color of border of square | 000 |
size | String | large | small or medium or large | medium |
type | String | click | Captcha event ( drag or click ) | drag |
rtl | Boolean | false | If your web page is RTL this must be true | false |
ondragCaptcha | Function | name_of_your_function | When items are dragged this function will be called ( only for drag type ) | null |
ondropCaptcha | Function | name_of_your_function | When items are dropped this function will be called ( only for drag type ) | null |
onclickCaptcha | Function | name_of_your_function | When items are clicked this function will be called ( only for click type ) | null |