title: Validating this image captcha code. Jquery PHP & javascript
body: <p>I have the captcha creating an image in captcha.php. On my contact php page, it calls for the image &amp; it has a reload and everything works. I just can't seem to find a way to validate it. </p>
  
  <p>Here is the code that creates the captcha image:</p>
  
  <pre><code>&lt;?php
  session_start();
  
  $word_1 = '';
  $word_2 = '';
  
  for ($i = 0; $i &lt; 4; $i++) 
  {
      $word_1 .= chr(rand(97, 122));
  }
  for ($i = 0; $i &lt; 4; $i++) 
  {
      $word_2 .= chr(rand(97, 122));
  }
  
  $_SESSION['random_number'] = $word_1.' '.$word_2;
  
  $dir = '/addons/fonts/';
  
  $image = imagecreatetruecolor(165, 50);
  
  $font = "recaptchaFont.ttf"; // font style
  
  $color = imagecolorallocate($image, 0, 0, 0);// color
  
  $white = imagecolorallocate($image, 255, 255, 255); // background color white
  
  imagefilledrectangle($image, 0,0, 709, 99, $white);
  
  imagettftext ($image, 22, 0, 5, 30, $color, $dir.$font, $_SESSION['random_number']);
  
  header("Content-type: image/png");
  
  imagepng($image); 
  
  ?&gt;
  </code></pre>
  
  <p>That is all that is in that file.</p>
  
  <p>Next there is the code from my actual form (contact us page):</p>
  
  <pre><code>&lt;form id="contactForm" method="post" action="&lt;?php echo $_SERVER['PHP_SELF']; ?&gt;"&gt;
  &lt;table&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;span class="greyText"&gt;Enter text shown:&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;
          &lt;div id="captcha-wrap"&gt;
              &lt;div class="captcha-box"&gt;
                  &lt;img src="captcha.php" alt="" id="captcha" /&gt;
              &lt;/div&gt;
              &lt;div class="text-box"&gt;
                  &lt;label&gt;Type the two words:&lt;/label&gt;
                  &lt;input name="captcha-code" type="text" id="captcha-code"&gt;
              &lt;/div&gt;
              &lt;div class="captcha-action"&gt;
                  &lt;img src="./images/captcha-refresh.png"  alt="" id="captcha-refresh" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;span id="captchaInfo"&gt;*&lt;/span&gt;  
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td colspan="2"&gt;
              &lt;div class="seperator"&gt;&amp;nbsp;&lt;/div&gt;
  
              &lt;input type="submit" name="submit" class="styleButton" style="float:right;margin-right:10px" value="SUBMIT" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I have other rows in that table for name, email etc, but I just removed it to make this shorter.</p>
  
  <p>&amp; in the document ready function for the contact page, I have this code to refresh the captcha when button is clicked:</p>
  
  <pre><code> // refresh captcha
   $('img#captcha-refresh').click(function() {  
  
          change_captcha();
   });
  
   function change_captcha()
   {
      document.getElementById('captcha').src='jquery-captcha.php?rnd=' + Math.random();
   }
  </code></pre>
  
  <p>Next is the validation I have for the whole form itself. It works for everything but the captcha: </p>
  
  <pre><code>$(document).ready(function(){
      //global vars
      var form = $("#contactForm");
      var name = $("#name");
      var nameInfo = $("#nameInfo");
      var telephone = $("#telephone");
      var telephoneInfo = $("#telephoneInfo");
      var email = $("#email");
      var emailInfo = $("#emailInfo");
      var message = $("#message");
      var messageInfo = $("#messageInfo");
      var captcha = $("#captcha-code");
      var captchaInfo = $("#captchaInfo");
  
      //On blur
      name.blur(validateName);
      telephone.blur(validatePhone);
      email.blur(validateEmail);
      message.blur(validateMessage);
      captcha.blur(validateCaptcha);
      //On key press
      name.keyup(validateName);
      telephone.keyup(validatePhone);
      message.keyup(validateMessage);
      captcha.keyup(validateCaptcha);
      //On Submitting
      form.submit(function(){
          if(validateName() &amp; validateEmail() &amp; validatePhone() &amp; validateMessage() &amp; validateCaptcha())
              return true
          else
              return false;
      });
  
      function validateName(){
          //if it's NOT valid
          if(name.val().length &lt; 4){
              name.addClass("error");
              nameInfo.text("* Name Required");
              nameInfo.addClass("error");
              return false;
          }
          //if it's valid
          else{
              name.removeClass("error");
              nameInfo.text("*");
              nameInfo.removeClass("error");
              return true;
          }
      }
      function validateCaptcha(){
  
          $.post("captchaValidate.php?"+$("#contactForm").serialize(), {
  
              }, function(response){
  
              if(response==1)
              {
                  captcha.removeClass("error");
                  captchaInfo.text("*");
                  captchaInfo.removeClass("error");
                  return true;
              }
              else
              {
                  captchaInfo.text("* Please enter the words you see in the box above. If you are having trouble seeing it, click the refresh button.");
                  captchaInfo.addClass("error");
                  captchaInfo.css({'float': 'left', 'margin-left': '5px'});
                  return false;
              }
  
          });
      }
  });
  </code></pre>
  
  <p>I again removed some of the code above to make this shorter but I left the validateName function so you can see how I pretty much did the rest of them.</p>
  
  <p>In the validateCaptcha code it directs to this page/code:</p>
  
  <pre><code>&lt;?php
  session_start();
  
  if(@strtolower($_REQUEST['captcha-code']) == strtolower($_SESSION['random_number']))
  {
  
      echo 1;// YAY!
  
  }
  else
  {
      echo 0; // invalid code
  }
  ?&gt;
  </code></pre>
  
  <p>Any help on this would be REALLY appreciated I've been stuck for so long! I have tried a few things already but nothing seems to work.</p>