使用Ajax进行验证码验证

Question

I am working with this tutorial, http://www.crackajax.net/captchaform.php , and having trouble. Neither the form or the captcha will validate. Here is my code for the form:

<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" name="contact" id="contact" onsubmit="return checkform(this);">

***form elements removed***

<!-- Start Captcha -->
<img src="captcha.php" border="0">
<p>Enter Letters:<input type="text" name="code" value=""><p>
<input type="submit" value="Submit Form" onclick="return checkform()">

Here is my script:

<script language="JavaScript">

        var url = 'captcheck.php?code=';
        var captchaOK = 2;  // 2 - not yet checked, 1 - correct, 0 - failed

        function getHTTPObject()
        {
        try {
        req = new XMLHttpRequest();
          } catch (err1)
          {
          try {
          req = new ActiveXObject("Msxml12.XMLHTTP");
          } catch (err2)
          {
          try {
            req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (err3)
            {
    req = false;
            }
          }
    }
        return req;
    }

        var http = getHTTPObject(); // We create the HTTP Object        

        function handleHttpResponse() {
        if (http.readyState == 4) {
            captchaOK = http.responseText;
            if(captchaOK != 1) {
              alert('The entered code was not correct. Please try again');
              document.contact.code.value='';
              document.contact.code.focus();
              return false;
              }
              document.contact.submit();
           }
        }

        function checkcode(thecode) {
        http.open("GET", url + escape(thecode), true);
        http.onreadystatechange = handleHttpResponse;
        http.send(null);
        }

        function checkform() {
        // First the normal form validation
        if(document.contact.req.value=='') {
          alert('Please complete the "required" field');
          document.contact.req.focus();
          return false;
          }
        if(document.contact.code.value=='') {
          alert('Please enter the string from the displayed image');
          document.contact.code.value='';
          document.contact.code.focus();
          return false;
          }
          // Now the Ajax CAPTCHA validation
          checkcode(document.contact.code.value);
          return false;
        }      
</script>

And last but not least, here is the captcha.php file:

<?php 
//Start a session so we can store the captcha code as a session variable.
session_start();
// Decide what characters are allowed in our string
// Our captcha will be case-insensitive, and we avoid some
// characters like 'O' and 'l' that could confuse users
$charlist = '23456789ABCDEFGHJKMNPQRSTVWXYZ'; 

// Trim string to desired number of characters - 5, say
$chars = 5;
$i = 0;
while ($i < $chars) 
{ 
  $string .= substr($charlist, mt_rand(0, strlen($charlist)-1), 1);
  $i++;
}

// Create a GD image from our background image file
$captcha = imagecreatefrompng('captcha.png');

// Set the colour for our text string
// This is chosen to be hard for machines to read against the background, but
// OK for humans
$col = imagecolorallocate($captcha, 240, 200, 240);

// Write the string on to the image using TTF fonts
imagettftext($captcha, 17, 0, 13, 22, $col, 'Carton-Slab.otf', $string);

// Store the random string in a session variable
$_SESSION['secret_string'] = $string;

// Put out the image to the page
header("Content-type: image/png");
imagepng($captcha);
?>

The captcha image box will show up and the letters/numbers will also show up but, as I mentioned earlier, the form/captacha will not validate. Once the form is submitted, the user is taken to the thank you page.

Answer 1

I copied the code from the tutorial and it works. You didn't say anything about the captcheck.php file, does it exist? Using the captcheck.php from the tutorial and your code I had to remove

if(document.contact.req.value=='') {
    alert('Please complete the "required" field');
    document.contact.req.focus();
    return false;
}

to get it to work.