Bootstrap 4 Валидация reCaptcha - PullRequest
Новая
       30

Bootstrap 4 Валидация reCaptcha

0 голосов
/ 27 мая 2019

Так как Bootstrap 4 имеет свою собственную проверку формы, я хотел бы добавить к ней Google Invisible reCaptcha . Но как я могу активировать grecaptcha.execute (); в javascript, чтобы он работал? Он должен выполнить reCaptcha после успешной проверки начальной загрузки, а не раньше.

Вот мой код: 

<?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>

Ответы [ 2 ]

0 голосов
/ 28 мая 2019

Я не заставляю его работать.Я думал, что-то простое работает так: 

<script>
// This is from Bootstrap 4 Validation Example
(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();
        } else {
          grecaptcha.execute();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>
0 голосов
/ 27 мая 2019

Вам нужен клик для самой формы, чтобы отменить капчу и вернуть false на этом клике. Затем в рамках вашего обратного вызова reCaptcha Execute вам необходимо отправить форму с помощью Javascript. или обещание

...