Comment afficher plusieurs recaptchas sur une seule page?


102

J'ai 2 formulaires sur une seule page. L'un des formulaires a un recaptcha qui s'affiche tout le temps. L'autre ne devrait afficher un recaptcha qu'après un certain événement tel que la maximisation des tentatives de connexion. Il y a donc des moments où j'aurais besoin de 2 recaptchas pour apparaître sur la même page. Est-ce possible? Je sais que je pourrais probablement en utiliser un seul pour les deux, mais la façon dont j'ai la mise en page, je préférerais de beaucoup en avoir 2. Merci.

Mise à jour: eh bien je suppose que ce n'est peut-être pas possible. Quelqu'un peut-il recommander une autre bibliothèque de capture à utiliser côte à côte avec reCaptcha? Je veux vraiment pouvoir avoir 2 captchas sur la même page.

Mise à jour 2: Et si mettre chaque formulaire dans une iframe? Serait-ce une solution acceptable?


Ne pourriez-vous pas simplement afficher le même deux fois?
Tyler Carter

1
J'ai essayé ça ... quand j'essaye de dupliquer le code captcha, il affichera simplement le captcha qui vient en premier
oym

Quiconque rencontre cela pour la nouvelle API recaptcha, cela est possible en utilisant le chargement explicite décrit avec des exemples dans la documentation sur developer.google.com/recaptcha/docs/display#recaptcha_methods
El Yobo

3
Un iframe devrait être possible mais c'est une mauvaise façon de résoudre le problème, comparé à l'utilisation de JavaScript comme dans Hüseyin Yağlıla réponse de . La plupart des navigateurs doivent prendre en charge JavaScript et le reCAPTCHA par défaut utilise de toute façon JavaScript. Cependant, je ne sais pas ce qu'il faudrait faire pour résoudre le problème sans le support de JavaScript.
Edward

Réponses:


14

Une question similaire a été posée sur le fait de faire cela sur une page ASP ( lien ) et le consensus là-bas était qu'il n'était pas possible de faire avec recaptcha. Il semble que plusieurs formulaires sur une seule page doivent partager le captcha, à moins que vous ne souhaitiez utiliser un autre captcha. Si vous n'êtes pas verrouillé dans recaptcha, une bonne bibliothèque à regarder est le composant Zend Frameworks Zend_Captcha ( lien ). Il contient quelques


9
C'est possible avec reCAPTCHA en fait , mais pas possible de se passer de JavaScript . La plupart des navigateurs devraient prendre en charge JavaScript et le ReCaptcha par défaut utilise de toute façon JavaScript, donc cette solution est bonne. Hüseyin YağlıLa réponse explique la solution. La documentation de reCAPTCHA pour cette solution est disponible sur developer.google.com/recaptcha/docs/display#explicit_render . Cependant, je ne sais pas ce qu'il faudrait faire pour résoudre le problème sans le support de JavaScript.
Edward

C'est absolument possible avec reCAPTCHA en fait
Carlos Espinoza

208

Avec la version actuelle de Recaptcha ( reCAPTCHA API version 2.0 ), vous pouvez avoir plusieurs recaptchas sur une seule page.

Il n'est pas nécessaire de cloner le recaptcha ni d'essayer de contourner le problème. Il vous suffit de mettre plusieurs éléments div pour les recaptchas et de rendre les recaptchas à l'intérieur d'eux explicitement.

C'est facile avec l'api google recaptcha:
https://developers.google.com/recaptcha/docs/display#explicit_render

Voici l'exemple de code html:

<form>
    <h1>Form 1</h1>
    <div><input type="text" name="field1" placeholder="field1"></div>
    <div><input type="text" name="field2" placeholder="field2"></div>
    <div id="RecaptchaField1"></div>
    <div><input type="submit"></div>
</form>

<form>
    <h1>Form 2</h1>
    <div><input type="text" name="field3" placeholder="field3"></div>
    <div><input type="text" name="field4" placeholder="field4"></div>
    <div id="RecaptchaField2"></div>
    <div><input type="submit"></div>
</form>

Dans votre code javascript, vous devez définir une fonction de rappel pour recaptcha:

<script type="text/javascript">
    var CaptchaCallback = function() {
        grecaptcha.render('RecaptchaField1', {'sitekey' : '6Lc_your_site_key'});
        grecaptcha.render('RecaptchaField2', {'sitekey' : '6Lc_your_site_key'});
    };
</script>

Après cela, l'URL de votre script recaptcha devrait ressembler à ceci:

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

Ou au lieu de donner des identifiants à vos champs recaptcha, vous pouvez donner un nom de classe et boucler ces éléments avec votre sélecteur de classe et appeler .render ()


1
Par coïncidence, savez-vous comment ajouter un champ recaptcha caché pour la validation de jquery pour chaque champ ?, actuellement je le fais fonctionner uniquement avec 1 recaptchafield mais peut-il fonctionner avec deux recaptchas? <input type = "hidden" class = "hiddenRecaptcha required" name = "hiddenRecaptcha" id = "hiddenRecaptcha">
Ivan Juarez

2
@IvanJuarez C'est une bonne question à poser en tant que nouvelle question.
Hüseyin Yağlı

2
Pour ceux d'entre vous qui souhaitent utiliser grecaptcha.getResponse () avec plusieurs instances, vous pouvez simplement référencer chaque rendu comme 0,1,2, etc. Par exemple, la première instance serait référencée comme grecaptcha.getResponse (0).
Gene Kelly

1
Gagnez mon temps, sa solution parfaite
Mirza Obaid

2
Hou la la! Cela a demandé du travail, mais pour ajouter à la note de @ GeneKelly concernant grecaptcha.getResponse(0)et grecaptcha.getResponse(1)valider plusieurs instances, j'ajouterais que l'indexation doit correspondre à l' grecaptcha.renderordre. Pour cet exemple, grecaptcha.render('RecaptchaField1'...serait vérifié avec grecaptcha.getResponse(0)et grecaptcha.render('RecaptchaField2'...serait vérifié avec grecaptcha.getResponse(1), etc ...
codacopia

75

Simple et direct:

1) Créez vos champs de recaptcha normalement avec ceci:

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

2) Chargez le script avec ceci:

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

3) Appelez maintenant ceci pour parcourir les champs et créer les recaptchas:

<script type="text/javascript">
  var CaptchaCallback = function() {
    jQuery('.g-recaptcha').each(function(index, el) {
        grecaptcha.render(el, {
            'sitekey' : jQuery(el).attr('data-sitekey')
            ,'theme' : jQuery(el).attr('data-theme')
            ,'size' : jQuery(el).attr('data-size')
            ,'tabindex' : jQuery(el).attr('data-tabindex')
            ,'callback' : jQuery(el).attr('data-callback')
            ,'expired-callback' : jQuery(el).attr('data-expired-callback')
            ,'error-callback' : jQuery(el).attr('data-error-callback')
        });
    });
  };
</script>

4
C'est la bonne façon IMO, cela le rend dynamique en ce sens que je peux avoir des instances illimitées sans définir d'identifiants statiques
Greg Alexander

1
Si vous avez besoin d'extraire manuellement le code captcha (comme dans les requêtes ajax), regardez ma réponse .
VanDir

Pourriez-vous s'il vous plaît jeter un oeil à ma question ? Le paramètre POST devient vide.
Marcio Mazzucato

3
data-sitekey="YOUR_KEY_HERE"est inutile et peut être supprimé de la div (si vous avez besoin de changer la clé, moins d'endroits à modifier)
the_nuts

3
En fait, vous avez une faute de frappe là-bas. L'attribut data-sitekey est nécessaire et le rend encore plus dynamique au cas où vous auriez plusieurs sitekeys, pourquoi jamais. La ligne correcte seraitgrecaptcha.render(el, {'sitekey' : $(el).attr('data-sitekey') });
Gkiokan

13

Ceci est facilement accompli avec la clone()fonction de jQuery .

Vous devez donc créer deux divs wrapper pour le recaptcha. Recaptcha div de mon premier formulaire:

<div id="myrecap">
    <?php
        require_once('recaptchalib.php');
        $publickey = "XXXXXXXXXXX-XXXXXXXXXXX";
        echo recaptcha_get_html($publickey);
    ?>
</div>

Le div du deuxième formulaire est vide (ID différent). Donc le mien est juste:

<div id="myraterecap"></div>

Ensuite, le javascript est assez simple:

$(document).ready(function() {
    // Duplicate our reCapcha 
    $('#myraterecap').html($('#myrecap').clone(true,true));
});

Vous n'avez probablement pas besoin du deuxième paramètre avec une truevaleur dans clone(), mais cela ne fait pas de mal de l'avoir ... Le seul problème avec cette méthode est que si vous soumettez votre formulaire via ajax, le problème est que vous avez deux éléments qui ont le même nom et vous devez être un peu plus intelligent avec la façon dont vous capturez les valeurs de cet élément correct (les deux identifiants pour les éléments reCaptcha sont #recaptcha_response_fieldet #recaptcha_challenge_field juste au cas où quelqu'un en aurait besoin)


Vous rencontrerez des problèmes lorsque vous demanderez un nouveau défi car il ne mettra à jour qu'une seule instance de
recaptcha

cela ne fonctionne pas ... signifie que seul le captcha d'origine (le premier appelé <div id = "myrecap"> ici) sera uniquement actualisé, et les autres non actualisés
Oxi

En fait Oxi, votre préoccupation a été abordée par mon commentaire précédent
Serj Sagan

1
Vous faites probablement mal ... que diriez-vous d'un lien vers votre code dans jsfiddle.net Quoi qu'il en soit, il n'est plus nécessaire de faire quoi que ce soit ... vous devriez utiliser la réponse de Hüseyin Yağlı.
Serj Sagan

7

Je sais que cette question est ancienne, mais au cas où quelqu'un la chercherait à l'avenir. Il est possible d'avoir deux captcha sur une seule page. Rose à la documentation est ici: https://developers.google.com/recaptcha/docs/display L' exemple ci-dessous est juste un document de copie de formulaire et vous n'avez pas à spécifier différentes mises en page.

<script type="text/javascript">
  var verifyCallback = function(response) {
    alert(response);
  };
  var widgetId1;
  var widgetId2;
  var onloadCallback = function() {
    // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
    // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
    widgetId1 = grecaptcha.render('example1', {
      'sitekey' : 'your_site_key',
      'theme' : 'light'
    });
    widgetId2 = grecaptcha.render(document.getElementById('example2'), {
      'sitekey' : 'your_site_key'
    });
    grecaptcha.render('example3', {
      'sitekey' : 'your_site_key',
      'callback' : verifyCallback,
      'theme' : 'dark'
    });
  };
</script>

5

Cette réponse est une extension de @raphadko réponse de .

Si vous avez besoin d'extraire manuellement le code captcha (comme dans les requêtes ajax), vous devez appeler:

grecaptcha.getResponse(widget_id)

Mais comment récupérer le paramètre d'id du widget?

J'utilise cette définition de CaptchaCallback pour stocker l' ID de widget de chaque boîte g-recaptcha (en tant qu'attribut de données HTML):

var CaptchaCallback = function() {
    jQuery('.g-recaptcha').each(function(index, el) {
        var widgetId = grecaptcha.render(el, {'sitekey' : 'your code'});
        jQuery(this).attr('data-widget-id', widgetId);
    });
};

Ensuite, je peux appeler:

grecaptcha.getResponse(jQuery('#your_recaptcha_box_id').attr('data-widget-id'));

pour extraire le code.


1
Hé, merci pour ça. Quel est le #your_recaptcha_box_id?
Lucas Bustamante

4

J'ai un formulaire de contact dans le pied de page qui s'affiche toujours et certaines pages, comme Créer un compte, peuvent également avoir un captcha, donc c'est dynamiquement et j'utilise la prochaine manière avec jQuery:

html:

<div class="g-recaptcha" id="g-recaptcha"></div>

<div class="g-recaptcha" id="g-recaptcha-footer"></div>

javascript

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit&hl=en"></script>
<script type="text/javascript">
  var CaptchaCallback = function(){        
      $('.g-recaptcha').each(function(){
        grecaptcha.render(this,{'sitekey' : 'your_site_key'});
      })
  };
</script>

4

Ceci est une version sans JQuery de la réponse fournie par raphadko et nom .

1) Créez vos champs de recaptcha normalement avec ceci:

<div class="g-recaptcha"></div>

2) Chargez le script avec ceci:

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

3) Appelez maintenant ceci pour parcourir les champs et créer les recaptchas:

var CaptchaCallback = function() {
    var captchas = document.getElementsByClassName("g-recaptcha");
    for(var i = 0; i < captchas.length; i++) {
        grecaptcha.render(captchas[i], {'sitekey' : 'YOUR_KEY_HERE'});
    }
};

2

En regardant le code source de la page, j'ai pris la partie reCaptcha et j'ai un peu changé le code. Voici le code:

HTML:

<div class="tabs">
    <ul class="product-tabs">
        <li id="product_tabs_new" class="active"><a href="#">Detailed Description</a></li>
        <li id="product_tabs_what"><a href="#">Request Information</a></li>
        <li id="product_tabs_wha"><a href="#">Make Offer</a></li>
    </ul>
</div>

<div class="tab_content">
    <li class="wide">
        <div id="product_tabs_new_contents">
            <?php $_description = $this->getProduct()->getDescription(); ?>
            <?php if ($_description): ?>
                <div class="std">
                    <h2><?php echo $this->__('Details') ?></h2>
                    <?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_description, 'description') ?>
                </div>
            <?php endif; ?>
        </div>
    </li>

    <li class="wide">
        <label for="recaptcha">Captcha</label>
        <div id="more_info_recaptcha_box" class="input-box more_info_recaptcha_box"></div>
    </li>

    <li class="wide">
        <label for="recaptcha">Captcha</label>
        <div id="make_offer_recaptcha_box" class="input-box make_offer_recaptcha_box"></div>
    </li>
</div>

jQuery:

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        var recapExist = false;
      // Create our reCaptcha as needed
        jQuery('#product_tabs_what').click(function() {
            if(recapExist == false) {
                Recaptcha.create("<?php echo $publickey; ?>", "more_info_recaptcha_box");
                recapExist = "make_offer_recaptcha_box";
            } else if(recapExist == 'more_info_recaptcha_box') {
                Recaptcha.destroy(); // Don't really need this, but it's the proper way
                Recaptcha.create("<?php echo $publickey; ?>", "more_info_recaptcha_box");
                recapExist = "make_offer_recaptcha_box";
            }
        });
        jQuery('#product_tabs_wha').click(function() {
            if(recapExist == false) {
                Recaptcha.create("<?php echo $publickey; ?>", "make_offer_recaptcha_box");
                recapExist = "more_info_recaptcha_box";
            } else if(recapExist == 'make_offer_recaptcha_box') {
                Recaptcha.destroy(); // Don't really need this, but it's the proper way (I think :)
                Recaptcha.create("<?php echo $publickey; ?>", "make_offer_recaptcha_box");
                recapExist = "more_info_recaptcha_box";
            }
        });
    });
</script>

J'utilise ici une simple fonctionnalité d'onglet javascript. Donc, n'a pas inclus ce code.

Lorsque l'utilisateur clique sur "Request Information", (#product_tabs_what)JS vérifie si recapExistc'est falseou a une certaine valeur. S'il a une valeur, cela appellera Recaptcha.destroy();à détruire l'ancien reCaptcha chargé et le recréera pour cet onglet. Sinon, cela créera simplement un reCaptcha et le placera dans le #more_info_recaptcha_boxdiv. Identique à l' #product_tabs_whaonglet "Faire une offre" .


2

var ReCaptchaCallback = function() {
    	 $('.g-recaptcha').each(function(){
    		var el = $(this);
    		grecaptcha.render(el.get(0), {'sitekey' : el.data("sitekey")});
    	 });  
        };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallback&render=explicit" async defer></script>


ReCaptcha 1
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>

ReCaptcha 2
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>

ReCaptcha 3
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>


où sont les 2 formes?
MeSo2

Désolé de ne pas vous avoir
surinder singh

juste mettre <div class="g-recaptcha" data-sitekey="your_site_key"></div>là où vous en
avez

1

Une bonne option est de générer une entrée recaptcha pour chaque formulaire à la volée (je l'ai fait avec deux mais vous pourriez probablement en faire trois ou plus). J'utilise jQuery, la validation jQuery et le plugin de formulaire jQuery pour publier le formulaire via AJAX, avec l'API Recaptcha AJAX -

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

Lorsque l'utilisateur soumet l'un des formulaires:

  1. intercepter la soumission - j'ai utilisé la propriété beforeSubmit de jQuery Form Plugin
  2. détruire toutes les entrées recaptcha existantes sur la page - j'ai utilisé la méthode $ .empty () de jQuery et Recaptcha.destroy ()
  3. appelez Recaptcha.create () pour créer un champ recaptcha pour le formulaire spécifique
  4. retourne false.

Ensuite, ils peuvent remplir le recaptcha et soumettre à nouveau le formulaire. S'ils décident de soumettre un formulaire différent à la place, eh bien, votre code vérifie les recaptchas existants, vous n'aurez donc qu'un seul recaptcha sur la page à la fois.


1

Pour ajouter un peu à raphadko réponse de : puisque vous avez plusieurs captchas (sur une seule page), vous ne pouvez pas utiliser le (universel) g-recaptcha-responseparamètre POST (car il contient qu'une seule réponse de captcha). Au lieu de cela, vous devriez utiliser l' grecaptcha.getResponse(opt_widget_id)appel pour chaque captcha. Voici mon code (à condition que chaque captcha soit dans sa forme):

HTML:

<form ... />

<div id="RecaptchaField1"></div>

<div class="field">
  <input type="hidden" name="grecaptcha" id="grecaptcha" />
</div>

</form>

et

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

JavaScript:

var CaptchaCallback = function(){
    var widgetId;

    $('[id^=RecaptchaField]').each(function(index, el) {

         widgetId = grecaptcha.render(el.id, {'sitekey' : 'your_site_key'});

         $(el).closest("form").submit(function( event ) {

            this.grecaptcha.value = "{\"" + index + "\" => \"" + grecaptcha.getResponse(widgetId) + "\"}"

         });
    });
};

Notez que j'applique la délégation d'événement (voir actualiser le DOM après ajouter l'élément ) à tous les éléments modifiés dynamiquement. Cela lie la réponse de chaque captha individuel à son submitévénement de forme .


Wow, je cherchais ça pendant des heures. Merci!!
Noir le

1

Voici une solution qui s'appuie sur plusieurs des excellentes réponses. Cette option est libre de jQuery et dynamique, ne vous obligeant pas à cibler spécifiquement les éléments par id.

1) Ajoutez votre balisage reCAPTCHA comme vous le feriez normalement:

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

2) Ajoutez ce qui suit dans le document. Il fonctionnera dans n'importe quel navigateur prenant en charge l' API querySelectorAll

<script src="https://www.google.com/recaptcha/api.js?onload=renderRecaptchas&render=explicit" async defer></script>
<script>
    window.renderRecaptchas = function() {
        var recaptchas = document.querySelectorAll('.g-recaptcha');
        for (var i = 0; i < recaptchas.length; i++) {
            grecaptcha.render(recaptchas[i], {
                sitekey: recaptchas[i].getAttribute('data-sitekey')
            });
        }
    }
</script>

1

La grecaptcha.getResponse()méthode accepte un paramètre facultatif "widget_id" et utilise par défaut le premier widget créé s'il n'est pas spécifié. Un widget_id est retourné par la grecaptcha.render()méthode pour chaque widget créé, il n'est pas lié à l'attribut iddu conteneur reCAPTCHA !!

Chaque reCAPTCHA a ses propres données de réponse. Vous devez donner un identifiant au reCAPTCHA div et le transmettre augetResponse méthode:

par exemple

<div id="reCaptchaLogin"
     class="g-recaptcha required-entry"
     data-sitekey="<?php echo $this->helper('recaptcha')->getKey(); ?>"
     data-theme="<?php echo($this->helper('recaptcha')->getTheme()); ?>"
     style="transform:scale(0.82);-webkit-transform:scale(0.82);transform-origin:0 0;-webkit-transform-origin:0 0;">
</div>


<script type="text/javascript">
  var CaptchaCallback = function() {
    jQuery('.g-recaptcha').each(function(index, el) {
        grecaptcha.render(el, {
            'sitekey' : jQuery(el).attr('data-sitekey')
            ,'theme' : jQuery(el).attr('data-theme')
            ,'size' : jQuery(el).attr('data-size')
            ,'tabindex' : jQuery(el).attr('data-tabindex')
            ,'callback' : jQuery(el).attr('data-callback')
            ,'expired-callback' : jQuery(el).attr('data-expired-callback')
            ,'error-callback' : jQuery(el).attr('data-error-callback')
        });
    });
  };
</script>

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

Réponse d'accès:

var reCaptchaResponse = grecaptcha.getResponse(0);

ou

var reCaptchaResponse = grecaptcha.getResponse(1);

0

C'est possible, il suffit de remplacer les rappels Recaptcha Ajax. Jsfiddle fonctionnant: http://jsfiddle.net/Vanit/Qu6kn/

Vous n'avez même pas besoin d'un proxy div car avec les écrasements, le code DOM ne s'exécutera pas. Appelez Recaptcha.reload () chaque fois que vous souhaitez déclencher à nouveau les rappels.

function doSomething(challenge){
    $(':input[name=recaptcha_challenge_field]').val(challenge);
    $('img.recaptcha').attr('src', '//www.google.com/recaptcha/api/image?c='+challenge);
}

//Called on Recaptcha.reload()
Recaptcha.finish_reload = function(challenge,b,c){
    doSomething(challenge);
}

//Called on page load
Recaptcha.challenge_callback = function(){
    doSomething(RecaptchaState.challenge)
}

Recaptcha.create("YOUR_PUBLIC_KEY");

0

Voici un bon guide pour faire exactement cela:

http://mycodde.blogspot.com.ar/2014/12/multiple-recaptcha-demo-same-page.html

En gros, vous ajoutez quelques paramètres à l'appel de l'API et effectuez manuellement le rendu de chaque recaptcha:

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

PS: La méthode "grecaptcha.render" reçoit un identifiant


0

J'utiliserais recaptcha invisible. Ensuite, sur votre bouton, utilisez une balise comme "formname = 'yourformname'" pour spécifier le formulaire à soumettre et masquer une entrée de formulaire d'envoi.

L'avantage de ceci est qu'il vous permet de garder la validation du formulaire html5 intacte, une recaptcha, mais plusieurs interfaces de boutons. Capturez simplement la valeur d'entrée "captcha" pour la clé de jeton générée par recaptcha.

<script src="https://www.google.com/recaptcha/api.js" async defer ></script>

<div class="g-recaptcha" data-sitekey="yours" data-callback="onSubmit" data-size="invisible"></div>
<script>
var formanme = ''
$('button').on('click', function () { formname = '#'+$(this).attr('formname');
    if ( $(formname)[0].checkValidity() == true) { grecaptcha.execute(); }
    else { $(formname).find('input[type="submit"]').click() }
    });

var onSubmit = function(token) {
    $(formname).append("<input type='hidden' name='captcha' value='"+token+"' />");
    $(formname).find('input[type="submit"]').click()
    };
</script>

Je trouve cela beaucoup plus simple et plus facile à gérer.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.