Click here to Skip to main content
12,700,567 members (31,113 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


6 bookmarked

Implementation of Captcha in Javascript

, 8 Oct 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
Generating Captcha using javascript for websites


This Particular article helps you in implementing Captcha in you webpage / website or in an application. Helps you in understanding and logical implentation of captcha on entirely client side.

Most of the websites use the technique of captcha for validation / verification purpose whenever someone tries accomplish membership or want to submit a piece of information. The generation of captcha can be done in various ways. We can use server side scripting or even we can use client side scripting.


In most of the cases some times it happens that we need to have some additional resources / dlls to be registered on the hosting server in order to implement the captcha basically this happens in case of server side scripting.Here I have implemented the Captcha functionality purely on the client side using javascript.

Using the code

Generating Captcha using client side scripting is quite a simple but make sure that the javascript is enabled. Ya now a days almost all of the browsers supports the javascript. Anyways lets move towards the code details. the source code is quite simple and straight forwad. Just copy and paste the below mentioned code in blank html page and save it as whatever you like. download / copy an image and put in under same folder or at same location where the HTML file is created.

Source Code

    <script type="text/javascript">

   //Created / Generates the captcha function    
    function DrawCaptcha()
        var a = Math.ceil(Math.random() * 10)+ '';
        var b = Math.ceil(Math.random() * 10)+ '';       
        var c = Math.ceil(Math.random() * 10)+ '';  
        var d = Math.ceil(Math.random() * 10)+ '';  
        var e = Math.ceil(Math.random() * 10)+ '';  
        var f = Math.ceil(Math.random() * 10)+ '';  
        var g = Math.ceil(Math.random() * 10)+ '';  
        var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
        document.getElementById("txtCaptcha").value = code

    // Validate the Entered input aganist the generated security code function   
    function ValidCaptcha(){
        var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
        var str2 = removeSpaces(document.getElementById('txtInput').value);
        if (str1 == str2) return true;        
        return false;

    // Remove the spaces from the entered and generated code
    function removeSpaces(string)
        return string.split(' ').join('');
<body onload="DrawCaptcha();">
        Welcome To Captcha<br />
        <input type="text" id="txtCaptcha" 
            style="background-image:url(1.jpg); text-align:center; border:none;
            font-weight:bold; font-family:Modern" />
        <input type="button" id="btnrefresh" value="Refresh" onclick="DrawCaptcha();" />
        <input type="text" id="txtInput"/>    
        <input id="Button1" type="button" value="Check" onclick="alert(ValidCaptcha());"/>

How does it works...

<input id="Button1" type="button" value="Check" onclick="alert(ValidCaptcha());"/>

Onclick Event of button we are invoking the ValidCaptcha() method. Which in turns returns an boolean value i.e. True/False.

ValidCaptcha() Method compare's the entered code in the text box aganist the drawn or displayed code in the captcha box. RemoveSpaces(string) Method repoves the occurance of any blank spaces within the created as well as entered code. After all the both the strings are compared by removing any blank spaces.

Based on the return value fron ValidCaptcha the result is displayed as either 'True' or 'False'. you can customize the return value to any user friendly message instead of true or false.

<input type="button" id="btnrefresh" value="Refresh" onclick="DrawCaptcha();" />

DrawCaptcha() Method is invoked to draw an captcha on the screen. On Click of refresh button we can generate/draw the new captcha images.

<body onload="DrawCaptcha();">

On body load I am calling DrawCaptcha() method so that whenever the page is loaded the default captcha should be drawn.

Here we go, Save the HTML page and open in the web browser (IE/FF etc). Happy Coding........:)


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Technical Lead Persistent Systems
India India
Working as Project Lead in Persistent Systems, CMMI level 5 company.

You may also be interested in...


Comments and Discussions

QuestionInsensitivity to uppercase and lowercase letters Pin
Member 116860051-Sep-15 1:40
memberMember 116860051-Sep-15 1:40 
GeneralMy vote of 1 Pin
_JohnDoe22-Jun-14 2:08
member_JohnDoe22-Jun-14 2:08 
GeneralMy vote of 1 Pin
Joshua Walsh15-Jun-14 16:49
memberJoshua Walsh15-Jun-14 16:49 
GeneralMy vote of 2 Pin
anamicaa23-Mar-14 20:53
memberanamicaa23-Mar-14 20:53 
GeneralMy vote of 3 Pin
Member 1059688321-Feb-14 22:23
memberMember 1059688321-Feb-14 22:23 
GeneralMy vote of 1 Pin
ProgramFOX27-Jan-13 1:32
member ProgramFOX27-Jan-13 1:32 
General[My vote of 1] Negative value Pin
SAKryukov3-Nov-09 19:36
memberSAKryukov3-Nov-09 19:36 
GeneralMy vote of 1 Pin
morsanu8-Oct-09 5:48
membermorsanu8-Oct-09 5:48 
GeneralMy vote of 1 Pin
SmirkinGherkin8-Oct-09 5:28
memberSmirkinGherkin8-Oct-09 5:28 
General[My vote of 2] My vote of 2 as well... Pin
kaschimer8-Oct-09 4:53
memberkaschimer8-Oct-09 4:53 
GeneralTechnically poor; very easy to break Pin
jimbobmcgee8-Oct-09 4:43
memberjimbobmcgee8-Oct-09 4:43 
I hate to say it but this article is technically very poor. You have not considered the basic reason for needing a captcha in the first place; namely, to prevent automated systems submitting forms.

The problem with your approach is that it is very easy to break. The random noise usually associated with a captcha image is to make it really hard for a computer program to use a character recognition algorithm on the generated image.

In your approach, character recognition is not even required, because the acceptable value is stored in a textbox. These are very easy to copy/paste, or read by javascript.

Consider the following string, pasted into the address bar:

javascript:document.getElementById('txtInput').value = document.getElementById('txtCaptcha').value.split(' ').join('');

The captcha is populated for you.

I've voted you a two for this article, because I thought it was well written, but I would not recommend that anyone uses the technique you have presented here.

GeneralMy vote of 2 Pin
jimbobmcgee8-Oct-09 4:32
memberjimbobmcgee8-Oct-09 4:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170118.1 | Last Updated 8 Oct 2009
Article Copyright 2009 by Jayawant
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid