reCaptcha v2 in conjunction with jQuery-Form-Valid

2019-07-26 12:22发布

问题:

I'm using the jQuery-Form-Validator. Now I want to integrate reCaptcha v2 into my form. The conjunction between both reCaptcha and the validator is somewhat unclear and hardly explained on the official website of the validator. I'm not searching a general solution to incorporate reCaptcha into a form because I know what to do. But I want to know how to do it with the above mentioned validator. Google wants you to paste

<div class="g-recaptcha" data-sitekey="your_site_key"></div>

The validator simply suggests to paste

<input data-validation="recaptcha" data-validation-recaptcha-sitekey="[RECAPTCHA_SITEKEY]">

But what now? It is not explained how the reCaptcha has to be implemented into the validator. I have the following code:

<html>
  <head>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src='https://www.google.com/recaptcha/api.js'></script>
  </head>
  <body>
    <form role="form" method="post" action="php/formHandler.php">
        <div class="form-group">                                    
            <input id="name" name="name" data-validation="length" data-validation-length="2-40" data-sanitize="trim escape" type="text" class="form-control input-lg" placeholder="name">
        </div>
        <div class="form-group">                                    
            <input data-validation="email" data-sanitize="trim escape" type="email" class="form-control input-lg" id="email" name="email" placeholder="email">
        </div>
        <div class="form-group">                                    
            <textarea data-validation="length" data-validation-length="min1" data-sanitize="trim escape" class="form-control input-lg" id="message" name="message"  placeholder="message" rows="5"></textarea>
        </div>
        <div class="g-recaptcha form-group" data-sitekey="my_sitekey">
        </div>
        <button type="submit" class="btn btn-lg btn-default">
            send
        </button>                               
    </form>         
   <script src="lib/jquery-1.12.3.min.js"></script> 
   <script src="lib/bootstrap.js"></script>                                             
   <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>   
  </body>
</html>

I've seen a similar question here, but it doesn't answer my question. I want to understand how to use

<input data-validation="recaptcha" data-validation-recaptcha-sitekey="[RECAPTCHA_SITEKEY]">

to make the reCaptcha working with the form. If there is anybody who uses that validator and has successfully implemented reCaptcha v2 I will be happy to hear about it...