Bootstrap 4验证验证码 [英] Bootstrap 4 Validation reCaptcha

查看:168
本文介绍了Bootstrap 4验证验证码的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

由于Bootstrap 4具有自己的表单验证功能,因此我想向其中添加 Google Invisible reCaptcha .但是,如何在javascript中激活 grecaptcha.execute(); 使其起作用?它应该在Bootstrap验证成功之后而不是之前执行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.

这是我的代码:

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

推荐答案

我在很多方面寻找了与引导程序默认验证代码兼容的前端解决方案,没有发现任何东西,而是编写了自己的解决方案.

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

这篇关于Bootstrap 4验证验证码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆