Codeigniter - Verify Captcha with Ajax

In this article, we are going to discuss about How to verify captcha with Ajax in CodeIgniter websites. Captcha is necessary to avoid spam. To avoid spam mails/accounts, we are using Captcha in forms. If we see with end user point of view, a user feel uncomportable when he/she has to give a right verification code and also have to receive an error message if it is wrong. If we use ajax to verify the captcha, it reduces the user's troubles.

We can check captcha on blur event or on submitting a form and alert the user about invalid code entered.

Here I have mentioned some steps to add captcha in your form and How to verify that captcha with Ajax in Codeigniter.

Step 1 : 

Use the below code to show captcha in Codeigniter (CI).

function Ajax_captcha(){
var code = $("#code").val(); // get the code entered 
if(code.length>1){
$('#Loading').show(); // show the loader image
$.post("<?php echo base_url()?>Site/Ajax_Captcha",{
code: $('#code').val()
}, function(response){
$('#Ifno').fadeOut();
setTimeout("RemoveAJAXCaptcha('Info', '"+escape(response)+"')", 400);
});
}
return false;
}
// this function will hide the loader image and show the result as inner html 
function RemoveAJAXCaptcha(id, response){
  $('#Loading').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}

Step 2:

Add the below code in your HTML.

<input id="code" name="code" type="text" value="" onblur="return Ajax_captcha();" />
<span id="Info"></span>
<span id="Loading">
<img src="<?php echo base_url()?>images/loader.gif" alt="" />
</span>

Step 3:

Add the below code in your controller file.

function Ajax_Captcha($code,$this->session->userdata('yourSessionVarOfCaptcha'))
{
  if ($code==strtoupper($this->session->userdata('yourSessionVarOfCaptcha')))
  {
       return true;
  }
  else
  {
      return false;
  }
}

I hope this article may helpful for you to add and verify the captcha with Ajax in CodeIgniter.