如何使用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。在我的示例中，如果郵件中包含「驗證碼」一詞，那意味着代碼輸入錯誤，用戶必須重新輸入新的驗證碼。