如何使用jQuery Validate插件测试Recaptcha

Question

我正在使用验证jquery插件和recaptcha的联系表单和我woudld想知道如何在验证表单之前验证代码是否正确如果不发送表单错误消息，因为现在验证一切，但我插入了一个错误的代码表单无论如何提交。这里是我的code ty提前anyhelp

<script type="text/javascript"> 
      var RecaptchaOptions = { 
       lang : 'en', 
       theme : 'custom', 
       custom_theme_widget: 'recaptcha_widget' 
      }; 
      </script> 

      <form id="contact" method="post" action="#"> 

       <fieldset> 
        <label for="name_contact">NAME</label> 
        <input type="text" class="input-xlarge" id="name_contact" name="name_contact" value="" placeholder="" minlength="2"> 

        <label for="email_contact">EMAIL</label> 
        <input type="email" class="input-xlarge" id="email_contact" name="email_contact" value="" placeholder=""> 

        <label for="telephone">CONTACT NUMBER</label> 
        <input type="tel" class="input-xlarge" id="telephone" name="telephone" placeholder="" value="" > 

        <label for="message">MESSAGE</label> 
        <textarea id="message" class="input-xlarge" name="message" placeholder="" rows="5"></textarea>     

        <div id="recaptcha_widget" style="display:none"> 

         <div id="recaptcha_image"></div> 
         <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div> 

         <span class="recaptcha_only_if_image">Enter the words above:</span> 
         <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span> 

         <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" /> 

         <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div> 
         <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div> 
         <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div> 

         <div><a href="javascript:Recaptcha.showhelp()">Help</a></div> 

        </div> 

        <script type="text/javascript" 
         src="http://www.google.com/recaptcha/api/challenge?k=6Lf8RN4SAAAAAKnllVnDw23UpBIuAIdTRFgN1kmX"> 
        </script> 

        <noscript> 
         <iframe src="http://www.google.com/recaptcha/api/noscript?k=6Lf8RN4SAAAAAKnllVnDw23UpBIuAIdTRFgN1kmX" height="300" width="500" frameborder="0"></iframe><br> 
         <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea> 
         <input type="hidden" name="recaptcha_response_field" value="manual_challenge"> 
        </noscript>    

        <button type="submit" value="" id="" name="send" class="pull-right lightblue btn-primary">SUBMIT</button> 
        </fieldset> 
</form> 


<script type="text/javascript"> 
    $(document).ready(function() { 

     $("#contact").validate({ 
      rules: { 
       "name_contact": { 
        required: true, 
        minlength: 3 
       }, 
       "email_contact":{ 
        required: true 
       }, 
       "message":{ 
        required:true 
       }, 
       "recaptcha_response_field":{ 
        required:true 
       } 

      }, 
      messages: { 
       "name_contact": { 
        required: "Please, enter a name" 
       }, 
       "email_contact":{ 
        required: "Enter a valid email" 
       }, 
       "message":{ 
        required: "Please provide a comment" 
       }, 
       "recaptcha_response_field":{ 
        required: "Captcha is required" 
       } 
      }, 
      errorPlacement: function(error, element) { 
       error.insertBefore(element); 
      } 
     }); 

    }); 
</script> 

Answer 1

没有简单的解决方案只使用JavaScript或jQuery。由于您必须将使用API​​的重新验证码与您的密钥进行比较，为了确保安全，您需要必须与一些服务器端代码一起执行此过程。

1. 用户填写表格正确，除了重新验证码。

2. 如果重新验证码为空，则jQuery Validate中的正常required规则会触发“缺少Captcha”消息。用户可以再试一次。

3. 的再图形验证码输入（正确或不正确），形式通过jQuery ajax的submitHandler回调函数内提交您服务器侧的代码。

4. 您的服务器-side代码，PHP，Perl，然后使用您的私有API密钥验证输入的Re-Captcha代码是否符合API预期的Re-Captcha代码。

5. 如果重新图形验证码是正确的，你的服务器侧的代码继续正常，并返回一个“成功”的文字回答您的jQuery ajaxsuccess回调函数。

6. 如果重新图形验证码是不正确，您服务器侧的代码将仅返回一个“错误”的文字回答您的jQuery ajaxsuccess回调函数，而服务器端代码会做什么其他。

7. 在你的jQuery ajaxsuccess回调函数中，读取从服务器端返回的消息文本代码。

8. 如果返回的消息表示成功，那么你的表格已经成功提交，你可以重定向，明确了表格，做动画，打印一个消息，什么也不做，或什么的，等

9. 如果返回的消息指示失败，请通过JavaScript生成新的重新验证码，显示错误消息“输入的验证码不正确”，用户可以简单地重试。

---

这是我做我的......你需要做的事情很像以下。

将submitHandler添加到您的.validate()选项，并使用ajax来控制表单提交。这是您与验证码和控件表单提交互动的唯一方式。

您还需要修改服务器端函数以测试验证码是否通过或失败，执行相应的功能并返回正确的ajax消息msg。如果不知道你的服务器端代码，就不可能说更具体的东西。

（注意：任何解决方案，它是纯粹的JavaScript/jQuery的，而无需编辑您的服务器端代码，是不安全验证码可以很容易地绕过你的私有API密钥被暴露给公众）

$(document).ready(function() { 

    $("#contact").validate({ 
     // your other options and rules, 
     submitHandler: function (form) { 
      $.ajax({ 
       type: 'POST', 
       data: $('form').serialize(), 
       url: 'formMail.pl', // <-- whatever your server-side script, mine is a perl form mailer 
       success: function (msg) { 
        if (msg.indexOf('captcha') != -1) { 
         Recaptcha.reload(); // reloads a new code 
         $('#recaptcha_response_field').before(msg); // error message 
        } else { 
         // anything else to do upon success, animations, etc. 
         // form was already submitted as per ajax 
        } 
       } 
      }); 
      return false; // blocks normal form submit 
     } 
    }); 

}); 

以下是我如何修改我的服务器端代码，这是一个窗体邮件程序脚本的PERL示例。你必须以类似的方式修改你的服务器端代码。

脚本第一次运行时调用子程序check_captcha。

sub check_captcha {  
     my $ua = LWP::UserAgent->new(); 
     my $result=$ua->post(
      'http://www.google.com/recaptcha/api/verify', 
      { 
       privatekey => 'xxxxxxxxxxxxx', # insert your private key here 
       remoteip => $ENV{'REMOTE_ADDR'}, 
       challenge => $Form{'recaptcha_challenge_field'}, 
       response => $Form{'recaptcha_response_field'} 
      } 
     ); 

     if ($result->is_success && $result->content =~ /^true/) { 
       return; # OK - continue as normal with Form Mailer 
     } else { 
       # error, Form Mailer will not continue 
       &error('captcha_failed'); # failed Captcha code, call error subroutine to print an error message (msg) containing the word "captcha" 
     } 
} 

记住这个服务器端代码必须您的jQuery ajaxsuccess回调中返回你的jQuery挑选的消息进行了上述msg。在我的示例中，如果邮件中包含“验证码”一词，那意味着代码输入错误，用户必须重新输入新的验证码。