在触发 ajaxForm 之前验证 Recaptcha

Question

我有一个表单，我在其中添加了一个 Recaptcha，它工作正常，但我想在通过 ajaxForm 提交表单之前在 Recaptcha 上添加一个 check/validation。

我有一段 jquery 代码可以在提交之前验证 Recaptcha 并且它可以工作，但这不能很好地与 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 中，因此在提交表单之前测试 recaptcha。如何做到这一点？

非常感谢您

------更新----

我已经成功实现了 beforeSubmit，现在我似乎能够在提交前进行验证。太棒了！

我想验证我的验证码，但我似乎无法验证 "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。 Return false 无效则取消提交。

您可以在提交前使用类似这样的内容：

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