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

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.

                  Thanks for reading 🙂 🙂 🙂