2回目の試行でのみハンドブックを実行する

Question

Invisible reCaptchaがキックインする前に1000hz bootstrap validatorを私のフォームに使用しています。そのためには、jQueryサブミットハンドラを使用する必要がありました。

問題は、送信ボタンが2回クリックされた後にのみ機能することです。最初のクリックでは、ハンドラをバイパスしてフォームが送信され、不可視のreCaptchaは実行されず、もちろんエラーが発生します。

これは形式です：

<form role="form" data-toggle="validator" data-disable="true" id="contactform" method="post" action="result.php"> 
    <div class="form-group"><label for="InputName1">Envianos un E-mail</label><input type="text" class="form-control" name="nameofuser" placeholder="Nombre, Apellido" required> 
    </div> 
    <div class="form-group"><label for="InputEmail1">Email</label><input type="email" class="form-control" name="email" placeholder="Tu E-mail" required data-error="Porfavor, ingrese una dirección de Email valida."> 
    <div class="help-block with-errors"></div> 
    </div> 
    <div class="form-group"><label for="InputName1">Mensaje</label><textarea class="form-control" rows="5" name="comment" required></textarea> 
    </div> 
    <div id='recaptcha' class="g-recaptcha" 
    data-sitekey="6LfCKjQUAAAAAPSp2YVmv-Yv2sOIPW_gp6CLVBUj" 
    data-callback="onCompleted" 
    data-size="invisible"> 
    </div> 
    <button type="submit" id="submit" style="font-size: 24px;" class="btn btn-box openSans" >Enviar</button> 
</form> 

そして、このJS：

$("#contactform").submit(function(e) { 

    $('#contactform').validator().on('submit', function (e) { 
    if (e.isDefaultPrevented()) { 
     // handle the invalid form... 
     console.log("FORM INVALIDO"); 
    } else { 
     // everything looks good! 
     if (!grecaptcha.getResponse()) { 
     console.log('captcha not yet completed.'); 
     event.preventDefault(); //prevent form submit 
     grecaptcha.execute(); 
     } else { 
     console.log('form really submitted.'); 
     } 
    } 
    }) 
}); 

onCompleted = function() { 
    console.log('captcha completed.'); 
    $("#contactform").submit(); 
} 

誰かがコンソールで見たい場合は、ここでの問題を表示するページです。 https://ccromatica.com/contacto

Answer 1

送信コールバック内にイベントハンドラを定義しています。

コード$('#contactform').validator().on('submit')は、初めてフォームを送信するまで登録されていません。 2回目にフォームを送信すると、イベントハンドラが動作し、それが何をするのかを行います。

最も簡単な解決策は、上記のようなすべてのイベントハンドラを送信機能の外に移動することです。

イベントハンドラを定義するときは常に、他の条件に基づいて定義するのではなく、最初に実行するようにします。