Google INVISIBLE reCaptcha + Bootstrap驗證器

我有一個註冊表格Bootstrap validator。我想在提交表單之前驗證谷歌INVISIBLE reCaptcha（客戶端）。有一些exapmle（客戶端驗證後調用不可見的reCAPTCHA挑戰）。我試圖改變這一部分：Google INVISIBLE reCaptcha + Bootstrap驗證器

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

這不工作，我不知道這是否是正確的方式。請指教如何加入隱形reCaptcha和Bootstrap驗證程序。謝謝你的幫助。

來源

2017-04-18 BuMoRi

哈哈，我有完全相同的問題，你的代碼與我的完全相同。下面的答案是有效的！ – Maurice

對我來說，下面的代碼工作

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

我用谷歌非官方隱形的reCAPTCHA PHP庫在這個程序，你可以從https://github.com/geordyjames/google-Invisible-reCAPTCHA下載。如果此方法不適用於您，請在下面評論。

來源

2017-04-19 15:24:21

它完美的作品，非常感謝你。 – BuMoRi

謝謝！我花了太長時間試圖弄清楚這一點。這工作完美。 – Maurice

Google INVISIBLE reCaptcha + Bootstrap驗證器

回答

相關問題