javascript - 由于验证码需要按提交按钮两次

Question

我正在使用 javascript 和 jquery 为我的网站设置一个不可见的 recaptcha，然后再转到 PHP，不知何故，我必须按提交按钮两次，然后出现两个特定错误，第一次单击时为 1，第二次单击时为 1 。

我尝试了几种不同的方法来更改回调名称(首先是 onCompleted)，以尝试使代码更简单，我也对此进行了一些研究，但针对我的具体情况没有得出任何积极的结果(尝试查找第一个错误，并尝试搜索“为什么我必须按提交按钮两次”)

HTML

<form method="POST" name="contact" class="formContact" id="formContact">

                    <div class="col-md-12">
                        <h1><label class="col-md-12"><?php echo $this->lang->line('index_contact_contact'); ?></label></h1>
                    </div>
                    <div class="col-md-12"></div>
                    <label class="col-md-4">*<?php echo $this->lang->line('index_contact_name'); ?>:</label>
                    <div class="col-md-8">
                        <input type="text" name="naam" class="form-control" placeholder="<?php echo $this->lang->line('index_contact_yname'); ?>">
                    </div>
                    <label class="col-md-4">*<?php echo $this->lang->line('index_contact_email'); ?>:</label>
                    <div class="col-md-8">
                        <input type="text" name="email" class="form-control" placeholder="<?php echo $this->lang->line('index_contact_yemail'); ?>">
                    </div>
                    <label class="col-md-4"><?php echo $this->lang->line('index_contact_phone'); ?>:</label>
                    <div class="col-md-8">
                        <input type="text" name="telefoon" class="form-control" placeholder="<?php echo $this->lang->line('index_contact_yphone'); ?>">
                    </div>
                    <label class="col-md-4">*<?php echo $this->lang->line('index_contact_question'); ?>:</label>
                    <div class="col-md-8">
                        <textarea id="vragen" name="vraag" style="resize:none" maxlength="500" class="form-control" placeholder="<?php echo $this->lang->line('index_contact_yquestion'); ?>"></textarea>
                        <p id="teller"></p>
                    </div>
                    <div class="col-md-8 col-md-offset-4" style="margin-top:10px;">
                        <?php
                        //echo $recaptcha->create_box();
                        ?>

                        <div class="g-recaptcha"
                             data-sitekey="........"
                             data-callback="callback"
                             data-size="invisible">
                        </div>

                    </div>
                    <div class="col-md-12 text-right inputcontact">
                        <input type="submit" name="btnSubmit" value="Verstuur"  class="btn btn-default">
                    </div>
                    <div class="col-md-12">
                        <label class="col-md-12 inputcontact"><?php echo $this->lang->line('index_contact_required'); ?></label>
                    </div>
                </form>

Javascript 和 Jquery

$("#formContact").validate({

       rules:{
           naam:{
               required:true,
               minlength:2,
               maxlength:40,
               accept:"[a-z A-Z]+"
           },
           email:{
               required:true,
               maxlength:50,
               email:true
           },
           telefoon:{
               required:false,
               accept:"[0-9 -]+",
               maxlength:15
           },
           vraag:{
               required:true
           }
       },
        messages:{
            naam:{
                minlength:"Dit veld moet minimaal {0} tekens bevatten.",
                accept: "Geen cijfers of speciale tekens."
            },
            telefoon:{
                maxlength: "Maximaal {0} tekens",
                accept: "alleen cijfers en het scheidingsteken: - "
            },
            email:{
                maxlength: "Dit veld mag maximaal {0} tekens bevatten.",
                email:"Dit is geen geldig e-mailadres"
            }
        }






    });
    var validationCheck = false;
    $("#formContact").submit(function(event) {


        if (grecaptcha.getResponse()) {
            // 2) finally sending form data
            event.submit();
        }else{
            // 1) Before sending we must validate captcha

            grecaptcha.reset();
            console.log('validation completed.');

            event.preventDefault(); //prevent form submit before captcha is completed
            grecaptcha.execute();

        }

    });

    callback = function(response) {
        console.log('captcha completed.');
        $("#formContact").submit();
        return true;
    };

PHP

if (isset($_POST['btnSubmit'])) {
    die("FFFFFFFFFFFF"); //testing purposes
}

我希望验证码能够正常工作(确实如此)，但我不想按两次提交按钮。

错误如下:

 anchor?ar=1&k=6LdHKaMUAAAAAO3BkeFXeKjwNiHqP6r4UttkmGzS&co=aHR0cDovL3d3dy5jZWVkZWV3aW5rZWwubG9jYWxob3N0Ojgw&hl=nl&v=v1559543665173&size=invisible&cb=j8dcjceh8cnl:1 Uncaught (in promise) null


contact:301 Uncaught TypeError: event.submit is not a function
    at HTMLFormElement.<anonymous> (contact:301)
    at HTMLFormElement.dispatch (VM75 jquery.js:3)
    at HTMLFormElement.r.handle (VM75 jquery.js:3)

Answer 1

尝试使用以下 block 代替您的提交 block 。我添加了内嵌注释。

var alreadySubmitted = false;//adding a extra variable to check already submitted.
$("#formContact").submit(function(event) {
    if (grecaptcha.getResponse() && alreadySubmitted) {
        // 2) finally sending form data
        alreadySubmitted = true;
        $("#formContact").submit(); // here you are doing wrong
    }else{
        grecaptcha.reset();
        console.log('validation completed.');

        event.preventDefault(); //prevent form submit before captcha is completed
        grecaptcha.execute();

    }

});