2017-04-18 18 views
3

登録フォームはBootstrap validatorです。フォームを送信する前にgoogle 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バリデータに参加する方法を教えてください。 ありがとうございます。

+0

私はまったく同じ問題を抱えていました。あなたのコードは私のものと同じでした。以下の答えがうまくいきます! – Maurice

答えて

3

<?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の目に見えないreCAPTCHAのPHPライブラリを使用して、あなたはhttps://github.com/geordyjames/google-Invisible-reCAPTCHAからそれをダウンロードすることができます。 この方法がうまくいかない場合は、下記のようにコメントしてください。

+0

これは完璧に動作します、ありがとうございます。 – BuMoRi

+1

感謝します!私はこれを理解しようとすると、あまりにも長く過ごしました。これは完全に機能しました。 – Maurice

関連する問題