Validation for captcha code using jquery

Question

I have a form in php which contains captcha code in it. I need to validate the captcha using jquery.If the captcha is wrong the form as display an alert saying the captcha u have entered is wrong.. Please tell me how can I validate it using jquery. Here is the code

$(function() {
    $("#XISubmit").click(function(){
var photo= document.forms["XIForm"]["photo"].value;
if (photo==null || photo=="") { alert("Please Enter captcha"); return false; }

    document.getElementById("XIForm").submit();
        }); 

<div class="formLeft">
        <h4>Admission</h4>

        <form name="XIForm" id="XIForm" method="POST" action="pdf/pdf.php">

<label>Security Validation</label>  

  <img src="captcha_image.php" alt=""/>
  <input  type="text" name="photo" maxlength="60" size="30"/>
<br><br>

</form>


captcha_image.php

<?
// *** CAPTCHA image generation ***
// *** http://frikk.tk ***

session_start();

// *** Tell the browser what kind of file is come'n at 'em! ***
header("Content-Type: image/jpeg");

// *** Send a generated image to the browser ***
die(create_image());

// *** Function List ***
function create_image()
{
    // *** Generate a passcode using md5
    //  (it will be all lowercase hex letters and numbers ***
    $md5 = md5(rand(0,9999));
    $pass = substr($md5, 10, 5);

    // *** Set the session cookie so we know what the passcode is ***
    $_SESSION["pass"] = $pass;

    // *** Create the image resource ***
    $image = ImageCreatetruecolor(100, 20);

    // *** We are making two colors, white and black ***
    $clr_white = ImageColorAllocate($image, 255, 255, 255);
    $clr_black = ImageColorAllocate($image, 0, 0, 0);

    // *** Make the background black ***
    imagefill($image, 0, 0, $clr_black);

    // *** Set the image height and width ***
    imagefontheight(15);
    imagefontwidth(15);

    // *** Add the passcode in white to the image ***
    imagestring($image, 5, 30, 3, $pass, $clr_white);

    // *** Throw in some lines to trick those cheeky bots! ***
    imageline($image, 5, 1, 50, 20, $clr_white);
    imageline($image, 60, 1, 96, 20, $clr_white);

    // *** Return the newly created image in jpeg format ***
    return imagejpeg($image);

    // *** Just in case... ***
    imagedestroy($image);
}
?>

Please help me how can I validate captcha using jquery

Answer 1

If you can prepare or find a image creator PHP page, you can get image page

`

// captcha creator
session_start();
$code=rand(1000,9999);
$_SESSION["code"]=$code;
$im = imagecreatetruecolor(50, 24);
$bg = imagecolorallocate($im, 22, 86, 165); //background color blue
$fg = imagecolorallocate($im, 255, 255, 255);//text color white
imagefill($im, 0, 0, $bg);
imagestring($im, 5, 5, 5,  $code, $fg);
header("Cache-Control: no-cache, must-revalidate");
header('Content-type: image/png');
$captha = imagepng($im);
imagedestroy($im);

`

and you can prepare a JS code and put it on onClick event of submit button. Then you will check captcha with that JS.

if($_SESSION['captcha'] == $("#form_captcha_text").val()){}

you will continue

else{ you will use here alert code.}

Answer 2

just updating Mohit Jain's code

 $(function() {
    $("#XISubmit").click(function(){
    var photo= document.forms["XIForm"]["photo"].value;
    var cap = '<?php echo $_SESSION["pass"]; ?>'   // try this
    if (photo==null || photo=="" || photo !=cap) { 
     alert("Please Enter captcha"); return false;
   }
    else{
    document.getElementById("XIForm").submit();
     }
        });  

Answer 3

try this

    $(function() {
        $("#XISubmit").click(function(){
        var photo= document.forms["XIForm"]["photo"].value;
        var cap = '<?php echo $_SESSION["pass"]; ?>'   // try this
        if (photo==null || photo=="" && photo !==cap) { 
         alert("Please Enter captcha"); return false;
       }
        else{
        document.getElementById("XIForm").submit();
         }
            });