ajaxFormを実行する前にRecaptchaを検証する

Question

私は、うまく動作するRecaptchaを追加したフォームがありますが、フォームがajaxFormを介して送信される前にRecaptchaにチェック/検証を追加したいと思います。

私は、送信前にRecaptchaを検証して動作するjqueryコードを持っていますが、これはajaxFormと併用するとうまく機能しません。以下は

$("form").submit(function(event) { 

    var testrecaptcha = $("#g-recaptcha-responser").val(); 
    if (testrecaptcha === "") { 
     event.preventDefault(); 
     $("#recaptcha").show(); 
    } 
}); 

フォームが送信された火災私のコードです：私のフォームはこのようになります

$('document').ready(function() 
    { 
     $('#quoteform').ajaxForm({ 
      target: "#previews", 
      success: function (msg2) { 
      $("#main_body").hide(); 
      $("#recaptcha").hide(); 
      $("#main_footer").hide(); 
      $("#previews").show(); 
      setTimeout(function() { $('#quote_modal').modal('hide'); }, 2500); 
      }, 
    }); 
}); 

：

<form action="/pages/addquote.php?country=en" class="quoteform" id="quoteform" method="post" name="quoteform"> 
    <input name="productId" type="hidden" value="28"> 
    <div class="modal-body" id="previews" style="min-height:100px; padding-top:10px; display:none"></div> 
    <div class="modal-body" id="main_body"> 
     <div class="form-group"> 
      <label for="UserNavn">Name:</label> <input class="form-control" id="UserNavn" name="email_navn" placeholder="Type Name" type="text" value="123"> 
     </div> 
     <div class="form-group"> 
      <label for="UserFirma">Company:*</label> <input class="form-control" id="UserFirma" name="email_firma" placeholder="Type Company" required="" type="text" value="123"> 
     </div> 
     <div class="form-group"> 
      <label for="UserEmail">E-mail:*</label> <input class="form-control" id="UserEmail" name="email_email" placeholder="Type E-mail" required="" type="email" value="email@email.com"> 
     </div> 
     <div class="form-group"> 
      <label for="UserTlf">Phone:</label> <input class="form-control" id="UserTlf" name="email_tlf" placeholder="Type Phone" type="text" value=""> 
     </div> 
     <div class="modal-footer" id="main_footer"> 
      <div class="g-recaptcha" data-sitekey="6LddZxQUAAAAADvGJMv-aQxBiX62fwCRjPtzw2yv" id="g-recaptcha-responser"></div> 
      <div class="col-xs-12 col-sm-6 text-left" id="recaptcha" style="color:red; display: none"> 
       <i aria-hidden="true" class="fa fa-exclamation-triangle"></i> Please verify that you are a human 
      </div><button class="btn btn-success" onclick="ga('send','pageview','/quote-submit');" type="submit">Send enquiry</button> 
     </div> 
    </div> 
</form> 

私はいくつかの異なる設定を試してみましたが、私はちょうど見えることはできませんrecaptcha検証をajaxFormに組み合わせて、フォームが提出される前に再テストがテストされるようにします。これはどうすればできますか？

は事前

にありがとうございました------ UPDATE ----

私は正常beforeSubmitを実装しているし、今私は、送信する前に確認することができるように思われます。すばらしいです！

私はrecaptchaを検証したいと思いますが、私は以下のリストのように "correctCaptcha"を検証することができないようです。 correctCaptchaが警告の代わりに値を格納し、beforeSubmitでこの変数を検証できるようにしたいと思います。

<div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="correctCaptcha"></div> 

var correctCaptcha = function(response) { 
     alert(response); 
    }; 

これは私が持っているものです。

var correctCaptcha = function(response) { 
      alert(response); 
     }; 
$('document').ready(function() 
    { 
     $('#quoteform').ajaxForm({ 

      beforeSubmit: function (arr, $form, options) { 
      if (correctCaptcha === "") { 
      alert("Please check the recaptcha to verify that you are a human"); 
      return false; 
      }, 

      target: "#previews", 
      success: function (msg2) { 
      $("#main_body").hide(); 
      $("#recaptcha").hide(); 
      $("#main_footer").hide(); 
      $("#previews").show(); 
      setTimeout(function() { $('#quote_modal').modal('hide'); }, 2500); 
      }, 
    }); 
}); 

Answer 1

は、ドキュメント（私はこれが右のプラグインであると仮定）http://jquery.malsup.com/form/#options-objectをお読みください。 beforeSubmitイベントを処理し、recaptchaを含む検証ロジックをそこに置きます。送信が無効であれば、それを取り消すにはfalseを返します。

あなたのbeforeSubmitにこのようなものを使用することができます。

if (grecaptcha.getResponse() == "") { 
    $("#recaptcha").show(); 
    return false; 
}