Question

我有一个表格，我添加了一个工作正常的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>

我尝试了一些不同的设置，但我似乎无法将重新验证验证结合到ajaxForm中，因此在提交表单之前会对recaptcha进行测试。怎么办呢？

非常感谢您提前

------ UPDATE ----

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

我想验证我的recaptcha，但我似乎无法验证“correctCaptcha”，正如我在下面列出的那样。我希望correctCaptcha包含值而不是alert，然后能够在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; 
}

在触发ajaxForm之前验证Recaptcha

1 个答案: