Skip to content
PuzzleCAPTCHA is a jQuery CAPTCHA plugin, requiring users to solve very simple puzzle.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
GitHub - Shortcut.lnk



Have a look at the live demo!!

How it works

  • It automatically generates a very simple jigsaw kind of puzzle from any image on the web.
  • Need to lock the form by using [disabled="true"] on the submit button.
  • You can generate a value by Server-side Script and put into the option called [targetVal] then it will pass when the form is submitted so can double check by Server-side script.

How to use

Basic Usage

  1. Add the plugin script
    	<pre>&lt;script src="puzzleCAPTCHA.js"&gt;&lt;/script&gt;</pre>
    	Add the style
    	<pre>&lt;link rel="stylesheet" href="puzzleCAPTCHA.css"&gt;</pre>
    	Add HTML
    	<pre>&lt;div id="PuzzleCaptcha"&gt;&lt;/div&gt;</pre>
    	Call me!!

    <script> $("#PuzzleCaptcha").PuzzleCAPTCHA({ imageURL:'' }); </script>

Options // default value

imageURL // My instagram photo ;)
including [http://].
<dt>width // <small>"auto"</small></dt>
<dd>Use number<small>(* without "px")</small>, when you need to specify the width of the puzzle.</dd>

<dt>height // <small>"auto"</small></dt>
<dd>The same as [width].</dd>

<dt>columns // <small>3</small></dt>
<dd>Add number to divide in column.</dd>

<dt>rows // <small>2</small></dt>
<dd>Add number to divide in row.</dd>

<dt>targetInput // <small>null</small></dt>
	Using jQuery selector - 
	e.g) The input tag looks like:<br>
<input type="hidden" class="any-class-name-selector-for-input" name="the-name-that-you-want-to-confirm-on-server-side-script">
	The value could be {targetInput:".any-class-name-selector-for-input"}

<dt>targetVal // <small>null</small></dt>
<dd>The value that can be anything what you want to submit so you can confirm on submitted form.</dd>

<dt>targetButton // <small>null</small></dt>
	Using jQuery selector - 
	e.g) The button tag looks like:<br>
	<pre>&lt;button type="submit" disabled="true" class="any-class-name-selector-for-button" name="any-name"&gt;Submit!!&lt;/button&gt;</pre>
	The value could be {targetButton:".any-class-name-selector-for-button"}


*Thing to do:

  • Validate the value passed when it is called.
  • Image preloading is not clear depending on the browser.
You can’t perform that action at this time.