Javascript 在jquery不工作的情况下进行表单验证后，不可见的reCaptcha V2

我正在编写一个带有工作表单的php页面，我想在其中添加不可见的recaptcha。 表格如下：

<form action="#" id="contact-form">
    <div class="input-group name-email input-field">
        <input type="text" name="name" id="name" placeholder="Name" class="form-control">
    </div>
     <!-- RECAPTCHA div-->
    <div class="g-recaptcha" data-sitekey=[key] data-callback="onSubmit" data-size="invisible">
    </div>
    <input type="button" id="form-submit" class="pull-right" value="Send">
 <form>

要验证表单，我使用以下方法：

<script type="text/javascript">
        $(function(){
            alert("Just Before Contact Form Validate");
            $('#contact-form').validate({
                rules: {
                        name: {
                        required: true,
                        minlength: 2
                    }
                },
                messages: {
                    name: {
                        required: "What's your name?",
                        minlength: "Name min.2 chars"
                    }
                },
                submitHandler: function(form) {
                    $(form).ajaxSubmit({
                        type:"POST",
                        data: $(form).serialize(),
                        url:[Another PHP page],
          success: {[do this]
          },
          error: {[do that]
          }etc etc

$（函数（）{
警报（“就在联系表生效之前”）；
$（“#联系方式”）。验证({
规则：{
姓名：{
要求：正确，
最小长度：2
}
},
信息：{
姓名：{
要求：“你叫什么名字？”，
minlength:“名称最少2个字符”
}
},
submitHandler:函数（表单）{
$（表格）.ajaxSubmit({
类型：“POST”，
数据：$（表单）.serialize（），
url:[另一个PHP页面]，
成功：{[这样做]
},
错误：{[这样做]
}等等

出于调试原因，我放置了警报；当我加载页面时，我收到了警报。 在表单之后，我包含了两个外部js文件进行验证：

        <!-- Contact form validation -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script>

为了处理recaptcha，在我添加了警报的javascript表单之后和之前

<script>
function onSubmit(token) {
    alert("Inside OnSubmit");
    var element=document.getElementById('contact-form');
    element.submit();
}
</script>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<script>
    $(function() {
        $("#form-submit").on('click',function() {
        grecaptcha.execute();
        alert('g-recaptcha executed');
        return false;
        });
    });
</script>

提交函数（令牌）{
警报（“内部提交”）；
var元素=document.getElementById（'contact-form'）；
元素。提交（）；
}
$（函数（）{
$（“#表单提交”）。在（'单击'，函数（）上{
grecaptcha.execute（）；
警报（“g-recaptcha已执行”）；
返回false；
});
});

出于调试原因，我也发布了这些警报。 当我加载页面时，我得到第一个警报；控制台部分没有报告错误。我按“Snd”，即使没有填写字段，我也会得到“g-recaptcha executed”和“inside on Submit”，然后页面在不验证输入的情况下重新加载。我希望它会停止并显示错误，但它会继续，现在我的浏览器不再在myPage.php中，而是在myPage.php中？name=&g-recaptcha-response=[long string]。但控制台中仍然没有显示错误。 我怎么修？有人能帮我吗？

---

谢谢。

如果我们不知道验证规则是什么，我们将无法帮助修复您的验证规则。请参阅最小、完整且可验证的示例：。此外，为了防止表单提交，您需要一些逻辑，说明reCaptcha是否有效，请执行此操作，否则执行此操作。请参阅此示例：谢谢@colecm的回复。我已编辑我在帖子中添加了我的验证；很明显，表单更复杂，但我把注意力集中在验证码部分。不管怎样，表单在没有验证码的情况下工作，所以我认为问题不存在。至于第二条评论，我想我必须在接收表单的php文件中进行检查，在那里我可以检查响应和响应看看使用captcha的私钥是否正确，或者我是否遗漏了什么？谢谢，我相信这些密钥可以让reCaptcha在您的网站上正常工作。对不起，我对后端不太熟悉。谢谢。如果我没有错，根据我在reCaptcha规范中的理解，首先您必须获得代码n、 在后端，您必须通过向google服务器发送一个带有私钥的请求来检查它；您将收到一个json，结果是。我的问题是，当我添加recaptcha时，正常的验证被完全跳过。此外，浏览器会重新加载php页面，并且不会转到che表单目的地，我无法理解原因。