Bootstrap 4 Validation reCaptcha

问题

Since Bootstrap 4 has their own form validation i like to add the Google Invisible reCaptcha to it. But how can i activate grecaptcha.execute(); in the javascript to make it work? It should execute the reCaptcha after Bootstrap Validation was successfull and not before.

Here is my code:

<?php
if($_SERVER["REQUEST_METHOD"] === "POST") {

    // Google reCaptcha
    $ip = $_SERVER['REMOTE_ADDR'];
    $api_response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretkey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$ip); 
    $api_response = json_decode($api_response, true);

    if($api_response["success"] === true) {
        echo "Success";
    } else {
        print_r($api_response);
    }
}
?>
<div class="container py-6">

    <form class="needs-validation" novalidate action="" method="POST">

        <div class="form-group">
            <label for="City">City</label>
            <input type="text" class="form-control" id="City" required>
            <div class="invalid-feedback">Please provide a valid city.</div>
        </div>

        <div id="recaptcha" class="g-recaptcha" data-sitekey="WhateverSiteKey" data-callback="onSubmit" data-size="invisible"></div>

        <button class="btn btn-dark">Send</button>

    </form>

</div>

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

<script>
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

回答1:

I searched a lot for fronted solution compatible with bootstrap default validation code, didn't found anything and wrote my own.

That's very straightforward and not ideal - but it works and solves my needs.

(function() {
    'use strict';

    window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {

                // CAPTCHA VALIDATION
                // var response = grecaptcha.getResponse();

                // if(response.length == 0){
                //     document.querySelector('.g-recaptcha>div').classList.add('border', 'border-danger')
                //     event.preventDefault();
                //     event.stopPropagation();
                // } 


                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }

                form.classList.add('was-validated');
            }, false);
        });

    }, false);
})();

回答2:

You need an onclick for the form itself to excecute the captcha and return false on that onclick. Then within your reCaptcha Execute callback you need to submit your form with Javascript. or promise

来源：https://stackoverflow.com/questions/56325265/bootstrap-4-validation-recaptcha

标签

twitter-bootstrap

bootstrap-4

invisible-recaptcha