title: Captcha with jQuery Validation plugin
body: <p>I'm using the famous <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="nofollow">jQuery Validation plugin</a> and i want to implement the captcha control. On their <a href="http://jquery.bassistance.de/validate/demo/" rel="nofollow">page</a> in the demos section there's <a href="http://jquery.bassistance.de/validate/demo/captcha/" rel="nofollow">that</a> but it seems to has an issue: when you click the image to refresh, it doesn't refresh! It's a famous plugin, so I've not posted codes because are many php files, and maybe many of you already know the solution. If needed I will try to post them. Thanks</p>
  
  <p>EDIT</p>
  
  <p><strong>// index</strong></p>
  
  <pre><code>&lt;?php
  
  // Make the page validate
  ini_set('session.use_trans_sid', '0');
  
  // Include the random string file
  require 'js/captcha/rand.php';
  
  // Begin the session
  session_start();
  
  // Set the session contents
  $_SESSION['captcha_id'] = $str;
  
  ?&gt;
  &lt;form id="form"&gt;
               &lt;div id="captchaimage"&gt;
                  &lt;a href="" id="refreshimg" title="Click to refresh image"&gt;
                      &lt;img src="js/captcha/images/image.php?&lt;?php echo time(); ?&gt;" width="132" height="46" alt="Captcha image" /&gt;
                  &lt;/a&gt;
               &lt;/div&gt;
               &lt;label for="captcha"&gt;insert captcha:&lt;/label&gt;
               &lt;input type="text" maxlength="6" name="captcha" id="captcha" /&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>// newsession.php</strong></p>
  
  <pre><code>&lt;?php
  
  // Include the random string file
  require 'js/captcha/rand.php';
  
  // Begin a new session
  session_start();
  
  // Set the session contents
  $_SESSION['captcha_id'] = $str;
  
  ?&gt;
  </code></pre>
  
  <p><strong>// process.php</strong></p>
  
  <pre><code>&lt;?php
  
  // Begin the session
  session_start();
  
  // To avoid case conflicts, make the input uppercase and check against the session value
  // If it's correct, echo '1' as a string
  if(strtoupper($_GET['captcha']) == $_SESSION['captcha_id'])
      echo 'true';
  // Else echo '0' as a string
  else
      echo 'false';
  
  ?&gt;
  </code></pre>
  
  <p><strong>// rand.php</strong></p>
  
  <pre><code>&lt;?php
  
  // Create a random string, leaving out 'o' to avoid confusion with '0'
  $char = strtoupper(substr(str_shuffle('abcdefghjkmnpqrstuvwxyz'), 0, 4));
  
  // Concatenate the random string onto the random numbers
  // The font 'Anorexia' doesn't have a character for '8', so the numbers will only go up to 7
  // '0' is left out to avoid confusion with 'O'
  $str = rand(1, 7) . rand(1, 7) . $char;
  
  ?&gt;
  </code></pre>
  
  <p><strong>//Validation</strong>  </p>
  
  <pre><code>$("#form").validate({  
      rules: {
  
          'captcha':{
              required: true,
              remote: "js/captcha/process.php"
          }
      },
  
      messages: {
          'captcha': "error"  
      },
  
      onkeyup: false
  });   
  </code></pre>
  
  <p><strong>// script refresh captcha</strong></p>
  
  <pre><code>$(function(){
      $("#refreshimg").click(function(){
          $.post('js/captcha/newsession.php');
          $("#captchaimage").load('js/captcha/image_req.php');
          return false;
      });
  });
  </code></pre>
  
  <p><strong>// image_req.php</strong></p>
  
  <pre><code>&lt;?php
  
  // Echo the image - timestamp appended to prevent caching
  echo '&lt;a href="" onclick="refreshimg(); return false;" title="Click to refresh image"&gt;
          &lt;img src="js/captcha/images/image.php?' . time() . '" width="132" height="46" alt="Captcha image" /&gt;
        &lt;/a&gt;';
  
  ?&gt;
  </code></pre>