不包括表单中 reCaptcha 响应的输入值

Question

我正在联系页面的表单中使用reCaptcha v2。发送表单后，所有内容都发送到电子邮件，包括G-recaptcha-response。如何在客户端使用 jquery 排除它。

这是设置：

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
 <form method="post" name="frmcontact" id="frmcontact" action="/mail/contact">
    <table width="100%" cellspacing="5">
        <tr>
        <td><div class="spancontacttitle">Full Name:</div>
          <div class="spancontact">
            <input type="text" class="contact" name="fullname" id="fullname" value="{{post.fullname}}" />
        </div></td>
        </tr>
        <tr>
          <td><div class="spancontacttitle">Email:</div>
            <div class="spancontact relative">
            <input type="text" class="contact" name="email_address" id="email_address" value="{{post.email_address}}" />
          </div></td>
        </tr>
        <tr>
          <td><span class="spancontacttitle">Your comments:</span>
          <div class="spancontact"><textarea class="textareainquiry" name="comments" id="comments">{{post.comments}}</textarea></div></td>
        </tr>
        <tr>
            <td>
             <div class="g-recaptcha" data-sitekey="{{site['recaptcha-public-key']}}" data-callback="recaptchaCallback"></div>
             <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
            </td>
        </tr>
        <tr>
          <td><input type="submit" class="submitinquiry" name="sbmt" id="sbmt" value="Send" /></td>
        </tr>
    </table>
</form>
<script type="text/javascript">
$(document).ready(function(){
    function recaptchaCallback() {
        $('#hiddenRecaptcha').valid();
    };
   $("#frmcontact").validate({
    debug: true,
    ignore: ".ignore",
    submitHandler: function() {
       document.frmcontact.submit(); return true;
    },
    rules: {
        fullname: {
            required: true
        },
        email_address: {
            required: true,
            email: true
        },
        hiddenRecaptcha: {
            required: function () {
                if(grecaptcha.getResponse() == '') {
                    return true;
                } else {
                    return false;
                }
            }
        }
    },
    messages: {
        fullname: "This field must not be empty.",
        email_address: "Please provide a valid email address.",
        hiddenRecaptcha: "Error reCAPTCHA"
    }
});
});
</script>

我尝试过的是在单击并验证 reCaptcha 时禁用隐藏输入：

hiddenRecaptcha: {
                required: function () {
                    if(grecaptcha.getResponse() == '') {
                        $('#hiddenRecaptcha').prop('disabled',false);
                        return true;
                    } else {
                        $('#hiddenRecaptcha').prop('disabled',true);
                        return false;
                    }
                }
            }

但是，该表单仍在发送 reCaptcha 响应。我在这里缺少什么？

Answer 1

如果不将g-recaptcha-response传递给服务器进行验证，您的 recaptcha 将毫无用处，因此请考虑在服务器端解决它。但是，如果您仍然想要一个客户端解决方案而不更改标记，以下是可能的方法：

$(function() {
  $("#frmcontact").submit(function(ev){
    ev.preventDefault();
    var arr = $(this).serializeArray();
    //concole.log(arr);
    //be sure that g-recaptcha-response is not there
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "/mail/contact");
    $.each(arr, function(k, v) {
      var newField = document.createElement("input");
      newField.setAttribute("type", "hidden");
      newField.setAttribute("name", v["name"]);
      newField.setAttribute("value", v["value"]);
      form.appendChild(newField);
    });
    document.body.appendChild(form);
    form.submit();
  });
});

这个想法是防止原始表单提交，然后创建另一个对用户不可见的表单，添加所有必需的数据并提交它。这里也对此进行了描述。