Needing to press the submit button twice due to recaptcha

Question

I'm setting up an invisible recaptcha for my site using javascript and jquery before it goes to PHP, somehow I have to press the submit button twice and I get two specific errors, 1 on the first click and 1 on the second.

I've tried a few different methods to changing the callback name (it was onCompleted first) to trying to make the code simpler, I've also done some research on this but came up with no positive results for my specific situation (tried looking up the first error and also tried searching "why do I have to press the submit button twice")

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 and 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
}

I expected the recaptcha to work (which it does, kinda), but I don't want to press the submit button twice.

Here are the errors:

 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

Try like the following block instead of your submit block. I have added inline comments.

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();

    }

});