bootstrapvalidator - Google INVISIBLE reCaptcha + Bootstrap 验证器

标签 bootstrapvalidator invisible-recaptcha

我有一个注册表 Bootstrap validator .我想在提交表单之前验证 google INVISIBLE reCaptcha(客户端)。 有一些 exapmle (在客户端验证后调用不可见的 reCAPTCHA 质询)。 我试图改变这部分:

  function validate(event) {
    event.preventDefault();
    $('#form-reg').validator('validate').on('submit', function (e) {
        if (e.isDefaultPrevented()) {
            //...
        } else {
            grecaptcha.execute();
        };
    });
  };

这行不通,我不知道这是不是正确的方法。 请指教如何加入不可见的 reCaptcha 和 Bootstrap 验证器。 感谢您的帮助。

最佳答案

下面的代码对我有用

<?php
$config = require('config.php');
?>
<html>
  <head>
    <title>reCAPTCHA demo</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Boostrap Validator --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" ></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $('#demo-form').validator().on('submit', function (e) {
          if (e.isDefaultPrevented()) {
            // handle the invalid form...
            console.log("validation failed");
          } else {
            // everything looks good!
            e.preventDefault();
            console.log("validation success");
            grecaptcha.execute();
          }
        });
    }); 

    function onSubmit(token){
        document.getElementById("demo-form").submit();
    };

    </script>

  </head>
  <body>
    <div class="container">
    <br>
        <div class="row">
            <div class="col-md-5 col-md-offset-3">
                <form id="demo-form" data-toggle="validator" role="form"  action="admin.php" method="POST" >
                    <div class="form-group">
                        <label for="inputName" class="control-label">Name</label>
                        <input type="text" class="form-control" id="inputName" placeholder="Geordy James" required/>
                    </div>
                    <div id='recaptcha' class="g-recaptcha"
                          data-sitekey="<?php echo $config['client-key']; ?>"
                          data-callback="onSubmit"
                          data-size="invisible"></div>
                    <button class="btn btn-block btn-primary"  type="submit">Submit</button>
                </form>
            </div>
        </div>
    </div>
    <script src="https://www.google.com/recaptcha/api.js" async defer ></script>
  </body>
</html>

我在此程序中使用了非官方的 Google Invisible reCAPTCHA PHP 库,您可以从 https://github.com/geordyjames/google-Invisible-reCAPTCHA 下载它。 . 如果此方法对您不起作用,请在下方评论。

关于bootstrapvalidator - Google INVISIBLE reCaptcha + Bootstrap 验证器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43463592/

相关文章:

javascript - 如果未对表单进行任何更改,则禁用提交按钮

twitter-bootstrap - BootstrapValidator,验证动态添加到表单的字段

java - 如何验证 reCAPTCHA V2 Java (Servlet)

javascript - 如何重置 Google reCaptcha?

javascript - 1000hz Bootstrap 验证器数据切换 ="validator"不工作

javascript - 如何将自定义验证功能与Bootstrap的验证一起使用?

javascript - 使用 Invisible Captcha V2 时何时调用 grecaptcha.execute()

recaptcha - 测试隐形 recaptcha

validation - Google INVISIBLE reCaptcha + Bootstrap 4 验证器