2017-04-18 5 views
3

Ich habe ein Registrierungsformular mit Bootstrap validator. Ich möchte das Google INVISIBLE reCaptcha (clientseitig) validieren, bevor ich das Formular abschicke. Es gibt einige exapmle (Aufruf der unsichtbaren reCAPTCHA-Abfrage nach der clientseitigen Validierung). Ich habe versucht, diesen Teil zu ändern:Google INVISIBLE ReCaptcha + Bootstrap Validator

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

Das funktioniert nicht, und ich weiß nicht, ob es der richtige Weg ist. Bitte beachten Sie, wie Sie sich dem unsichtbaren ReCaptcha und Bootstrap-Validator anschließen. Vielen Dank für Ihre Hilfe.

+0

Haha, ich hatte genau das gleiche Problem, Ihr Code war identisch mit meinem. Die Antwort unten funktioniert! – Maurice

Antwort

3

Der Code unten Arbeit für mich

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

I Unofficial Google Invisible reCAPTCHA PHP-Bibliothek in diesem Programm verwendet, und Sie können es von https://github.com/geordyjames/google-Invisible-reCAPTCHA herunterladen. Wenn diese Methode nicht für Sie funktioniert, kommentieren Sie bitte unten.

+0

Es funktioniert perfekt, vielen Dank. – BuMoRi

+1

DANKE !!! Ich habe viel zu lange versucht, das herauszufinden. Das hat perfekt funktioniert. – Maurice