在触发 ajaxForm 之前验证 Recaptcha答案

【问题标题】：Validating Recaptcha before firing ajaxForm在触发 ajaxForm 之前验证 Recaptcha
【发布时间】：2017-06-24 17:23:14
【问题描述】：

我有一个表单，我在其中添加了一个正常工作的 Recaptcha，但我想在通过 ajaxForm 提交表单之前对 Recaptcha 添加一个检查/验证。

我有一段 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，现在我似乎能够在提交之前进行验证。太好了！

我想验证我的验证码，但我似乎无法验证“正确验证码”，如下所示。我希望正确的Captcha 包含值而不是警报，然后能够在 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);
            },
    });
});

【问题讨论】：

阅读文档（我认为这是正确的插件）jquery.malsup.com/form/#options-object。处理 beforeSubmit 事件并将您的验证逻辑放在那里，包括 recaptcha。如果提交无效，返回 false 取消提交。
感谢@ADyson - 我已经更新了我的问题和代码，现在它包含了 beforeSubmit。现在我只剩下一件了。
"testrecaptcha" 似乎没有在 beforeSubmit 事件的上下文中定义。为了获得最终结果，您需要使用正确的Captcha 回调来设置某种（更多）全局布尔变量，然后您可以在 beforeSubmit 事件的上下文中引用该变量。此外，不要忘记您还需要在服务器端验证整个表单，包括验证码 - 客户端验证对于恶意用户/机器人来说是微不足道的。
我的错@ADyson - 这是一个错字。我的意思是验证正确的验证码而不是“testrecaptcha”。当我通过单击 recaptcha 进行测试时，我确实从 var correctCaptcha = function(response) { alert(response); };所以这部分有效。我只是需要能够在 beforeSubmit 中验证正确的Captcha 以查看变量是否包含值。我只是不知道如何更改变量，因此它不会显示警报，而只包含我在 beforeSubmit 中验证所需的值。
在 correctCatpcha 中，将全局布尔变量设置为 true/false。然后在 beforeSubmit 中，检查全局变量的值是否为真。如果是真的，你可以继续。

标签： jquery ajax forms validation ajaxform

【解决方案1】：

阅读文档（我认为这是正确的插件）http://jquery.malsup.com/form/#options-object。处理 beforeSubmit 事件并将您的验证逻辑放在那里，包括 recaptcha。如果提交无效，返回false取消提交。

您可以在 beforeSubmit 中使用类似的内容：

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

【讨论】：