在提交表单时要求重新验证？答案

【问题标题】：Requiring recaptcha on form submit?在提交表单时要求重新验证？
【发布时间】：2016-02-02 14:26:48
【问题描述】：

我们刚刚将 google recaptcha v2 添加到我们的网站。它工作正常，但我们希望在表单提交时要求 reCaptcha。我们使用默认的不显眼的 jquery 验证。当用户不填写 reCaptcha 小部件时，g-recaptcha-response 将为空。我已经看到其他线程询问如何使用 javascript 验证 reCaptcha。我们绝对不想这样做，我们仍然希望从服务器端对其进行验证，但希望阻止垃圾邮件机器人尝试提交表单（因此使其成为必需）。

看起来 mvc 只是在每个必填字段中添加了data-val="true"和data-val-required="my error message"，但我不确定如何挂钩 reCaptcha。我还想确保以下代码仍然可以正常工作：

if ($(form).valid()) {
  .....
}

【问题讨论】：

标签： jquery asp.net-mvc jquery-validate recaptcha unobtrusive-validation

【解决方案1】：

我只需要解决同样的问题并想出了以下可行的方法。总而言之，添加一个隐藏字段，在该隐藏字段上运行 jquery 非侵入式验证，并在 recaptcha 回调和到期时填充/清除它。

脚本：

function reCaptchaVerify(response) {
    $('#hidden-recap').val(response);
}

function reCaptchaExpired () {
    $('#hidden-recap').val('');
}

function reCaptchaCallback () {
    grecaptcha.render('g-recaptcha', {
      'sitekey': RC2KEY,
      'callback': reCaptchaVerify,
      'expired-callback': reCaptchaExpired
    });
}

$.validator.setDefaults({ ignore: null });

在表单中，添加字段：

<div><input type="hidden" name="hidden-recap" id="hidden-recap" class="text form-control" value="" maxlength="500"
data-val="true" data-val-required="Please complete reCaptcha" />
<span class="field-validation-valid" data-valmsg-for="hidden-recap" data-valmsg-replace="true"></span></div>

注意事项

隐藏字段只是用于客户端验证，检查 reCaptcha 已完成；服务器验证可以忽略它。
需要最后的脚本行 .setDefaults，因为默认情况下不显眼的验证会忽略隐藏字段。

【讨论】：

【解决方案2】：

我没有找到完美的解决方案，但我找到了一些暂时可行的方法： http://www.ivanthevariable.com/combining-googles-recaptcha-and-jquery-validate/

html:

<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
<div class="g-recaptcha" data-sitekey="{YOUR-SITE-KEY-HERE}"></div>

javascript:

var validator = $("#add-conference").validate({
   ignore: ".ignore",
   rules: {
       city: {
           required: function() {
               if ($("#city-name").val()) {
                   return false;
               } else {
                   return true;
               }
           }
       },
       country: {
           required: function() {
               if ($("#country-name").val()) {
                   return false;
               } else {
                   return true;
               }
           }
       },
       "hiddenRecaptcha": {
           required: function() {
               if(grecaptcha.getResponse() == '') {
                   return true;
               } else {
                   return false;
               }
           }
       }
   }
});

我不喜欢这个解决方案的地方是我不得不关闭不显眼的验证。希望有人提出一个解决方案，在此之前我会使用这个解决方案。

【讨论】：