Main menu
WalkswithMeAjaxSimple Captcha Plugin with Ajax Validation

Simple Captcha Plugin with Ajax Validation

Captcha validation or human activity checker is necessary in these days lot of spam and site hacks are facing every where , So the captcha plugin with ajax will help you to prevent spam to your website. How this works ? its pretty simple and easy to integrate it check a security text on the client side and server side for make sure the form was submitted by a user. In these days we saw every website have the forms like contact or inquire etc. all these form must have basic validation with captcha some forms have captcha but its not ajax integrated . What is the benefit of captcha plugin with ajax ? yes its simple the users will know that they enter the correct word before submitting the form.

Captcha plugin with ajax

Captcha plugin with ajax

Now you get how the captcha plugin with ajax works and what is the important it in the form right ?. Now we can start the integration of the captcha plugin with ajax. first you have to create user interface for the plugin. create a file with index.html and have the following codes in the body part.


<center>
<p><strong>Write the following word:</strong></p>
<form method="GET" name="form1">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
Security Text:
</td>
<td><input type="text" name="captcha" id="captcha-form" onblur="myfun(this.value)" onkeyup="myfun(this.value)" /><br/>
</td>
<td>
<img src="captcha.php" id="captcha" /><br/>
</td>
<td>
<a href="javascript:;" onclick="click_refresh()" id="change-image"><img src="ajax-refresh-icon.png" alt="walkswithme captcha validation" /></a>
</td>
</tr>
<tr>
<td colspan="4" align="center">
Validation Status: <div id="status"></div>
</td>
</tr>
</table>
</form>
</center>

The the ajax integration with javascript or jQuery here i just use http response with normal javascript ajax if you want you can use Ajax jQuery instead of this. But you required an external jQuery library for that . The following scripts inside your head tag.


<script type="text/javascript" >
function myfun(value)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//alert(xmlhttp.responseText);
document.getElementById("status").innerHTML=xmlhttp.responseText;
}
}
//alert(document.getElementById("txtHint").innerHTML);
xmlhttp.open("GET","captcha_ajax.php?captcha="+value,true);
xmlhttp.send();
//alert(value);
//document.form1.submit();
}
function click_refresh()
{
document.getElementById('captcha').src='captcha.php?'+Math.random();
document.getElementById('captcha-form').focus();
document.getElementById('status').innerHTML="";
document.getElementById('captcha-form').value="";
}
</script>

 

Then the basic Css styles if we required you can customize the css easily add the following styles in your head section.


<style type="text/css">
body { font-family: sans-serif; font-size: 0.8em; padding: 20px; }
#result { border: 1px solid green; width: 300px; margin: 0 0 35px 0; padding: 10px 20px; font-weight: bold; }
#change-image { font-size: 0.8em; }
td{
padding:10px;
}
table{
border-color:#EEE;
}
</style>

Yes you have done captcha plugin with ajax validation. Please remember this validation only on client side so you have make sure your server side scripting also validate with captcha text and captcha session.

 

Would you like this ? see a demo and download the code ? clicks the below links.

demo_image                  Thanks for reading :):):)

Download6649 downloads

8 thoughts on “Simple Captcha Plugin with Ajax Validation

  1. Hi WWM,

    I appreciate the effort you have put on creating this simple captcha plugin.
    But I found this Captcha works based on session, which is not good, as It will not work in real world scenarios.
    Eg: If you open the same page containing Captcha in two different tabs of same browser then your code will not work for 1st tab page.

    Suggestion: Remove session based validation and do based on encryption/reference based validation.

    Regards,
    Anand S

    1. Yes, I know that, its a good point Anand,

      I used this plugin along with page token for keeping data on session. So each page have different session variable based on runtime.
      thanks for pointing out
      New Users Please take care of this session thing!

    1. How you checked ?
      It have Ajax php page so should be check with localhost (Xampp or Wamp).
      Just extracting it to a folder will not run the php codes like HTML.
      check with any localhost or Server and let me know the status.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

FacebookTwitterGoogle+RSS