• Web Design

Improving Website Security with jQuery Captcha Plugins

Captcha is designed to recognize the difference between a bot and human and sometimes even malicious software to provide the security to your system. If you want to prevent the entry of bots into your website then you can start using the CAPTCHA as it is the smartest way to stop it.

Today we’ve collected 10 useful examples of captcha plugins using jquery, php, asp.net with tutorials that can be downloaded for free. We hope that these examples will help you to create your website security, please check out following plugins.

Ajax Stylish Captcha and Contact Form using JQuery and PHP

This tutorial is about ajax based contact form with jquery validation and ajax based captcha. Captcha is main part of any form and if it is ajax based then it looks awesome.

(function(){var _jQuery=window.jQuery,_$=window.$;var jQuery=window.jQuery=window.

Download

***

MotionCAPTCHA – Drawing-Based Captcha With jQuery

Captchas are usually hard to use and boring. However they help a lot in minimizing headaches on the application-side by making sure that an action is performed by a human.

function Ribbon( ctx ) {
		this.init( ctx );
	}

	Ribbon.prototype = {
		ctx: null,
		X: null, 
		Y: null,
		painters: null,
		interval: null,
		init: function( ctx ) {
			var scope = this,
				userAgent = navigator.userAgent.toLowerCase(),
				brushSize = 2 : 1,
				strokeColor = [0, 0, 0];

Download

***

jQuery fancy Draggable Captcha

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

(function(){

var 
	// Will speed up references to window, and allows munging its name.
	window = this,
	// Will speed up references to undefined, and allows munging its name.
	undefined,
	// Map over jQuery in case of overwrite
	_jQuery = window.jQuery,
	// Map over the $ in case of overwrite
	_$ = window.$,

	jQuery = window.jQuery = window.$ = function( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		return new jQuery.fn.init( selector, context );
	},

Download

***

Jquery Advanced Ajax validation with CAPTCHA

jQuery offers a plugin called validate which will allow you to create stunningly user friendly sign up forms, login addresses, contact forms and much more. The plugin is written and maintained by Jörn Zaefferer, a member of the jQuery team, lead developer on the jQuery UI team and maintainer of QUnit. In this tutorial you will learn how to create a signup form with advanced AJAX validation and CAPTCHA.

$("#refreshimg").live('click',function(){

		$.post('php/newsession.php');
		$("#captchaimage").load('php/image_req.php');
		return false;
                
	});

Download

***

reCaptcha style Captcha with JQuery and PHP

This tutorial is about to create a captcha same as recaptcha. CSS and PHP are used for this. You can find few tutorials about creating and integrating captcha/recaptcha in php over 99points, but now you can create your own recaptcha style captcha with php and jquery.

#captcha-wrap{
	border:solid #870500 1px;
	width:270px;
	-webkit-border-radius: 10px;
	float:left;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background:#870500;
	text-align:left;
	padding:3px;
	margin-top:3px;
	height:100px;
	margin-left:80px;
}
#captcha-wrap .captcha-box{
	-webkit-border-radius: 7px;
	background:#fff;
	-moz-border-radius: 7px;
	border-radius: 7px;
	text-align:center;
	border:solid #fff 1px;
}

Download

***

jQuery validate plugin plus PHP equals captcha

With all the captchas out there right now why would anyone reinvent the wheel and write another one. Well sometimes it’s pretty useful to write something new. Using the validation jQuery plugin and some help of php you’ll be able to create simple captcha.

	$.validator.methods.equal = function(value, element, param) {
		return value == param;
	};
	$(document).ready(function(){
		$("#yourform").validate({
				rules: {
					lastName: "required",
					math: {
						equal: 	
					}
				},
				messages: {
					lastName: "*",
					math: "*"
				}
			});
	});
	

***

s3capcha

s3capcha is advanced captcha script that is based on choosing the right image instead of writing hardly readable letters and numbers.

session_start();
if($_POST['s3capcha'] == $_SESSION['s3capcha'] && $_POST['s3capcha'] != '') {
   unset($_SESSION['s3capcha']);
   // true //
} else {
   // false //
}

Download

***

jQuery Real Person

This plugin is designed to help overcome automated form submission by requiring a “real person” to identify text made up of dots. The entered value is compared on the server with the generated value to determine whether processing should continue.

function RealPerson() {
	this._defaults = {
		length: 6, // Number of characters to use
		includeNumbers: false, // True to use numbers as well as letters
		regenerate: 'Click to change', // Instruction text to regenerate
		hashName: '{n}Hash' // Name of the hash value field to compare with,
			// use {n} to substitute with the original field name
	};
}

Download

***

ASP.NET MVC Captcha

This tutorial you will learn how to build an ASP.NET Captcha that is lightweight and easy to use.

namespace ManagedFusion.Web
{
	/// 

	/// 
	/// 
	[AttributeUsage(AttributeTargets.Method, AllowMultiple = false, Inherited = false)]
	public sealed class CaptchaValidationAttribute : Attribute
	{
		/// 

		/// Initializes a new instance of the  class.
		/// 
		public CaptchaValidationAttribute() 
			: this("captcha") { }

		/// 

		/// Initializes a new instance of the  class.
		/// 
		/// The field.
		public CaptchaValidationAttribute(string field)
		{
			Field = field;
		}

		/// 

		/// Gets or sets the field.
		/// 
		/// The field.
		public string Field { get; private set; }
	}
}

Download

***

Drag and Drop Image Captcha

Ajax Fancy captcha is a jQuery plugin that will help you protect your website pages from bots and spammers. The captcha is really intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into the circle.

borderColor: "",
captchaDir: "captcha",
url: "captcha/captcha.php",
formId: "myForm",
text: "Verify that you are a human,
drag scissors into the circle.”,
items: Array(”pencil”, “scissors”, “clock”, “heart”, “note”)

***