Google Invisible ReCaptcha on multiple forms in a same page - PHP

Question

I am following this Invisible ReCaptcha doc on my php website: http://www.pinnacleinternet.com/installing-invisible-recaptcha/ everything works well. but while implement on multiple forms in a same page then Captcha only work on first form and not sure what’s happening with the second form, I curious to know how its work with multiple forms in a single page. Or anyone please suggest a working doc for multiple forms?

//this is @Geordy's javascript portion modified according to jquery.validate
    <script type="text/javascript">

    $().ready(function() {
    var demo1Call = 0;
    var demo2Call = 0;

        // validate and submit 1st form
        $("#demo-form1").validate({
            rules: {

                  pass: {
                    required: true,
                    pwcheck: true,
                    minlength: 5
                  },
            },
            messages: {
                  pass: {
                    required: "Please provide a password",
                    pwcheck: "<br />*Minimum length 8<br />*Maximum length 24<br />*Atleast a digit<br />*Atleast an upper case<br />*Atleast a lowercase<br />*Atleast a special character from these !@#$%",
                    minlength: "Your password must be at least 5 characters long"
                  },
            },
            success: function(error){
                console.log("Successfully validated");  
            },
            submitHandler: function(form) {

                demo1Call++;
                if(demo1Call==1){
                    widgetId1 = grecaptcha.render('recaptcha1', {
                    'sitekey' : '<?php echo $config['client-key']; ?>',
                    'callback' : onSubmit1,
                    'size' : "invisible"
                    });
                }
                grecaptcha.reset(widgetId1);
                grecaptcha.execute(widgetId1);
            },
        });

        //validate and submit 2nd form
        $("#demo-form2").validate({
            rules: {

                  pass: {
                    required: true,
                    pwcheck: true,
                    minlength: 5
                  },
            },
            messages: {
                  pass: {
                    required: "Please provide a password",
                    pwcheck: "<br />*Minimum length 8<br />*Maximum length 24<br />*Atleast a digit<br />*Atleast an upper case<br />*Atleast a lowercase<br />*Atleast a special character from these !@#$%",
                    minlength: "Your password must be at least 5 characters long"
                  },
            },
            success: function(error){
                console.log("Successfully validated");  
            },
            submitHandler: function(form) {

                demo2Call++;
                if(demo2Call==1){
                    widgetId2 = grecaptcha.render('recaptcha2', {
                    'sitekey' : '<?php echo $config['client-key']; ?>',
                    'callback' : onSubmit2,
                    'size' : "invisible"
                    });
                }
                grecaptcha.reset(widgetId2);
                grecaptcha.execute(widgetId2);
            },
        });



    });

    $.validator.addMethod("pwcheck", function(value) {
       var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%])[0-9A-Za-z!@#$%]{8,24}$/;
       return pattern.test(value);
    });

function onSubmit1(token){
        document.getElementById("demo-form1").submit();
};

function onSubmit2(token){
        document.getElementById("demo-form2").submit();
};

</script>

Geordy James · Accepted Answer · 2017-05-11 16:01:12Z

4

The below code work for me

<?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(){
        var demo1Call = 0;
        var demo2Call = 0;

        $('#demo-form1').validator().on('submit', function (e) {
          if (e.isDefaultPrevented()) {
            // handle the invalid form...
            console.log("validation failed");
          } else {
            // everything looks good!
            demo1Call++;

            e.preventDefault();         
            console.log("validation success");

            if(demo1Call==1)
            {
                widgetId1 = grecaptcha.render('recaptcha1', {
                'sitekey' : '<?php echo $config['client-key']; ?>',
                'callback' : onSubmit1,
                'size' : "invisible"
                });
            }

            grecaptcha.reset(widgetId1);

            grecaptcha.execute(widgetId1);          
          }
        });

        $('#demo-form2').validator().on('submit', function (e) {
          if (e.isDefaultPrevented()) {
            // handle the invalid form...
            console.log("validation failed");
          } else {
            // everything looks good!
            demo2Call++;

            e.preventDefault();
            console.log("validation success");

            if(demo2Call==1)
            {
                widgetId2 = grecaptcha.render('recaptcha2', {
                'sitekey' : '<?php echo $config['client-key']; ?>',
                'callback' : onSubmit2,
                'size' : "invisible"
                });
            }

            grecaptcha.reset(widgetId2);

            grecaptcha.execute(widgetId2);

          }
        });

    });

    function onSubmit1(token){
            document.getElementById("demo-form1").submit();
    };

    function onSubmit2(token){
            document.getElementById("demo-form2").submit();
    };

    </script>


  </head>
  <body>
    <div class="container">
    <br>
        <div class="row">
            <div class="col-md-5 col-md-offset-3">
                <form id="demo-form1" 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='recaptcha1' ></div>
                    <button class="btn btn-block btn-primary"  type="submit">Submit</button>
                </form>
            </div>
        </div>

    <br>
        <div class="row">
            <div class="col-md-5 col-md-offset-3">
                <form id="demo-form2" data-toggle="validator" role="form"  action="admin2.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='recaptcha2' ></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 used Unofficial Google Invisible reCAPTCHA PHP library in this program and you can download it from https://github.com/geordyjames/google-Invisible-reCAPTCHA . If this method doesn't work for you please comment below.

edited May 11, 2017 at 16:01

answered May 10, 2017 at 11:59

Geordy James

2,4183 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Riyas Muhammed Over a year ago

Thanks, it's really working fine, now I can create multiple forms in a single page with invisible reCaptcha but one thing I noticed reCaptcha image window cannot reopen if someone closed by clicking on outside, see here recordit.co/cTA8RClYD5

Geordy James Over a year ago

@RiyasMuhammed I updated the code and it will work fine. The main cause of that error is grecaptcha.render is tried to execute more than one time. I prevented it by defining a global variable demo1Call to check the function execution time thus prevent grecaptcha.render from executing multiple times.

Riyas Muhammed Over a year ago

Wow, you rally rocking!!!!! working perfectly now :) Thanks Geordy. I am using jQuery.validate, just modified the code accordingly and working fine with jQuery.validate also.

Marcio Duarte Over a year ago

@RiyasMuhammed Can you please post the code you used to make it wordk with jQuery.validate?

Riyas Muhammed Over a year ago

@MarcioDuarte I just updated few more codes in my Question, that worked for me for jQuery.validate , lets try and let me know

|

Collectives™ on Stack Overflow

Google Invisible ReCaptcha on multiple forms in a same page - PHP

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related