Saturday, December 6, 2014

Multiple reCAPTCHA Implementation on Same Page [Sample]

Page with multiple forms always need multiple reCAPTCHA for spam validation.

With Google new reCAPTCHA library "I'm not a robot" and Javascript parameter you can simply implement this multiple validation.

                           View Demo  |   Download Code

Needables:

1) Google reCAPCTHA Javascript URL
2) Following Implementation steps.

The difference between automatic reCAPTCHA loading and explicit manual loading is the following script with onload callback funtion.

For Manual (or Multiple reCAPTCHA's in a page)
<script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>

You need to mention the following in above URL
  • onload = your local javascript callback function
  • render = explicit
Multple reCAPTCHA loaded on same Page

Html Form Code

    <div class="container">
      <div class="col-md-6">
          <form class="form-signin" role="form" action="validateform.php" method="POST">
                <div id="status">
                </div>
            <h2 class="form-signin-heading">Please sign in</h2>
            <label for="inputEmail" class="sr-only">Email address</label>
            <input type="email" id="inputEmail" value="mycodde@test.com" class="form-control" placeholder="Email address" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" value="rashid" class="form-control" placeholder="Password" required>
            <div id="recaptcha1"></div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
          </form>
      </div>
      <div class="col-md-6">
          <form class="form-signin" role="form" action="validateform.php" method="POST">
                <div id="status">
                </div>
            <h2 class="form-signin-heading">Sign Up Form</h2>
            <label for="inputEmail" class="sr-only">Email address</label>
            <input type="email" id="inputEmail" value="mycodde@test.com" class="form-control" placeholder="Email address" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" value="rashid" class="form-control" placeholder="Password" required>
        <div id="recaptcha2"></div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
          </form>
      </div>
    </div> <!-- /container -->

Javscript Code

    <script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>
    <script>
      var recaptcha1;
      var recaptcha2;
      var myCallBack = function() {
        //Render the recaptcha1 on the element with ID "recaptcha1"
        recaptcha1 = grecaptcha.render('recaptcha1', {
          'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
          'theme' : 'light'
        });
        
        //Render the recaptcha2 on the element with ID "recaptcha2"
        recaptcha2 = grecaptcha.render('recaptcha2', {
          'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
          'theme' : 'dark'
        });
      };
    </script>

Thats it.

81 comments:

  1. Thank you for the nice example. The method worked without any problems for me.

    ReplyDelete
    Replies
    1. Great Article Cloud Computing Projects

      Networking Projects

      Final Year Projects for CSE

      JavaScript Training in Chennai

      JavaScript Training in Chennai

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  2. it worked, thanks :D

    ReplyDelete
  3. what a nice solution, thanks :)

    ReplyDelete
  4. Awesome. Thanks.

    ReplyDelete
  5. best answer, wish you the best.

    ReplyDelete
  6. When you verify the second recaptcha, grecaptcha object doesn't fills up with the response, so you can't check if the recaptcha is submitted by doing grecaptcha.getResponse() to validate form before submitting. Any suggestions?

    ReplyDelete
    Replies
    1. hi david i am facing the same problem. did you get any solution?

      Delete
    2. I have the same issue, although it's with grecaptcha.reset() rather than getResponse. I use this with ajax requests so it would be nice to be able to reset the captcha if there was an error on the forum, especially considering the captcha doesn't have a refresh button like the old one did. Considering either using one recaptcha and attempting to display the same one in multiple locations or switch to AYAH since I have been able to use multiple instances at once before, and it still follows the simplicity approach except it's a drag and drop game rather than a simple checkbox.

      Delete
    3. Finally found the answer for this and it seems to be working. Basically when you use the render as above if you want to use the reset or getResponse function, all you need to do is pass the variable the render was assigned to to the first (only) parameter of the function.
      For example, grecaptcha.reset(recaptcha1); would reset the rendered recaptcha on the variable recaptcha1.

      https://developers.google.com/recaptcha/docs/display#js_api

      Delete
    4. You can do like this: grecaptcha.getResponse(recaptcha2)

      This help me

      Delete
    5. Hi,

      I have 2 recaptcha's in one page, first one is correctly validated from google and the second one is not, getting false as a response from google. i have added the below in client side and on submit, i added the code to validate the response from google(which is coming as false for 2nd recaptcha). Please help me out on this.Thanks in advance.


      var recaptcha1;
      var recaptcha2;
      var myCallBack = function () {

      recaptcha1 = grecaptcha.render('recaptcha1', {
      'sitekey': 'site key', //Replace this with your Site key
      'theme': 'light'
      });
      //grecaptcha.reset(recaptcha1);
      //Render the recaptcha2 on the element with ID "recaptcha2"
      recaptcha2 = grecaptcha.render('recaptcha2', {
      'sitekey': 'site key', //Replace this with your Site key

      'theme': 'dark'
      });

      };

      Delete
  7. I'm running Wordpress with a form in my common footer. On certain pages, I have two forms in which your integration works well. However, on the pages where there is only 1 form (footer), it breaks the reCaptcha from appearing. How do I allow it to work when there's only 1 form on the page?

    ReplyDelete
    Replies
    1. The error given on single form page is "Uncaught Type Error: Cannot read property 'children' of null" on recaptcha_en.js which is called in by the api.

      Delete
  8. Thank you very much! I have been looking for a way to do this for several weeks and had given up until a spam storm forced me to search again. Took me about 5 minutes to test it and install it. Now I have another page that has 3 forms - each on a different tab - where I'll be using it next.

    ReplyDelete
  9. Such a nice and straight forward solution, searching for over two hours for the solution. Great article and many many thanks for such a nice solution.

    Thanks & Regards,
    Bhanu

    ReplyDelete
  10. nice...it works fine :) thank you :)

    I have one question...how to make it required with javascript?
    I've tried but only the first one displaying an alert when it's not checked...

    ReplyDelete
  11. Just a heads-up, this does not work if you use Google's recommended and approved reCAPTCHA system.

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. It's Good but one problem is there when we put validation message if user leave recaptcha code ??

    ReplyDelete
  14. Is there another solution besides rendering both in the callback?

    ReplyDelete
  15. very thanks, mycodde.blogspot

    100% work

    thanks thanks

    ReplyDelete
  16. I have multiple forms and RECAPTCHAs working on a page driven by the Orchard CMS however I cannot get around the problem of multiple verification iframes displaying every time I click the "I'm not a robot" checkbox. Anybody been able to solve a similar issue?

    ReplyDelete
    Replies
    1. Yes! I noticed this yesterday, I click one captcha and both open the puzzle area at the same time, and one of the puzzle areas is a blank white frame.

      Delete
  17. Yes! I noticed this yesterday, I click one captcha and both open the puzzle area at the same time, and one of the puzzle areas is a blank white frame.

    ReplyDelete
  18. It's working. Is there complications when using the same secret key? The second captcha is using the first. Am I correct?

    ReplyDelete
  19. It works but I want to use 3 captchas so I added another var and function but it didnt work.
    Please help.
    Thanks.

    ReplyDelete
  20. hi bro how required captcha it is working the spam msg coming

    ReplyDelete
  21. Really Awesome. Nice Script! Thank you so much

    ReplyDelete
  22. Can some one able to implement no captcha recaptcha in multiple forms in single page. Pls help on it

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. Very nice...
    but i have one doubt. i am from Brazil and i wold like to used the portuguese language.
    i try change a script src="https://www.google.com/recaptcha/api.js?hl=pt-BRonload=myCallBack&render=explicit" async defer but dont work.

    the language is pt-BR. Anybody can help me?

    ReplyDelete
    Replies
    1. u forgot '&'
      Try this way
      "https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit&hl=pt-BR"

      Delete
  25. I tried to get recaptcha, But i am getting "ERROR for site owner:
    Invalid domain for site key" message.

    ReplyDelete
    Replies
    1. I have generated new site key and i am using that one. still i am facing the same problem

      Delete
  26. very good, thank you so much

    ReplyDelete
  27. Worked like a charm. Thanks mate.

    ReplyDelete
  28. how to validate two captcha with id

    ReplyDelete
  29. I am very inspired to read your post about digital marketing, it will be very helpful for all new learner to learn Digital marketing courses in pune.

    ReplyDelete
  30. Both recaptcha not displaying. Can any one help me?

    ReplyDelete
  31. I got it. Did small mistake.

    ReplyDelete
  32. What about invisible recaptcha?

    ReplyDelete
  33. Thank you so much! For a non-coder, this was a lifesaver.

    ReplyDelete
  34. i have been following this website blog for the past month. i really found this website was helped me a lot and every thing which was shared here was so informative and useful. again once i appreciate their effort they are making and keep going on.

    Digital Marketing Consultant in Chennai

    Freelance Digital Marketing Consultant

    ReplyDelete
  35. Analytics should not be confused with the analysis itself. The analysis is theoretical and subjective, whereas analytics is a methodology to come to a logical conclusion. machine learning course hyderabad

    ReplyDelete
  36. Thanks for sharing this information. I really Like Very Much.
    devops online training

    ReplyDelete
  37. Thank you for posting informative insights, I think we have got some more information to share with! Do check out
    oracle training in chennai and let us know your thoughts. Let’s have great learning!

    ReplyDelete
  38. Thank you for posting informative insights, I think we have got some more information to share with! Do check out Python Training In Chennai and let us know your thoughts. Let’s have great learning!

    ReplyDelete
  39. Good resource. bsc 3rd year time table The best part is that you keep it updating.

    ReplyDelete
  40. Sharing the same interest, Infycle feels so happy to share our detailed information about all these courses with you all! Do check them out
    Big data training in chennai & get to know everything you want to about software trainings.

    ReplyDelete