Comment vérifier en js que l'utilisateur a coché la case dans Google recaptcha?

j'ai ajouté ce qui suit avant la fin de la tête

<script src='https://www.google.com/recaptcha/api.js'></script>

j'ai ajouté ceci avant la fin du formulaire

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

je peux voir la recaptcha semblable à https://developers.google.com/recaptcha/

cependant, lorsque l'utilisateur appuie sur les données sans cocher la case, les données sont soumises. Y a-t-il un autre code que je dois ajouter pour vérifier si l'Utilisateur a appuyé sur la case à cocher? Avec un peu de chance à js?

48
demandé sur Hello Universe 2015-02-23 16:31:13

5 réponses

Google a une option de rappel lorsque la case est cochée.

Ajouter ceci à votre élément de formulaire:

data-callback="XXX"

Exemple:

<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="== xxxxxx =="></div>

et un attribut désactivé à votre bouton Soumettre.

Exemple:

<button id="submitBtn" disabled>Submit</button>

puis créer une fonction de rappel et écrire le code dont vous avez besoin.

Exemple:

function recaptchaCallback() {
    $('#submitBtn').removeAttr('disabled');
};
138
répondu slinky2000 2016-12-29 05:01:16

vous pouvez aussi appeler l'objet grecaptcha pour vérifier. grecaptcha.getResponse(); est vide lorsqu'il n'est pas vérifié et a le code de vérification lorsqu'il est vérifié.

grecaptcha.getResponse().length === 0 quand non vérifié

function isCaptchaChecked() {
  return grecaptcha && grecaptcha.getResponse().length !== 0;
}

if (isCaptchaChecked()) {
  // ...
}
42
répondu Olafur Tryggvason 2017-09-21 01:02:53

Pour vérifier si google recaptcha est cochée ou pas, vous pouvez le faire par le code suivant : 

<script>

if(grecaptcha && grecaptcha.getResponse().length > 0)
{
     //the recaptcha is checked
     // Do what you want here
     alert('Well, recaptcha is checked !');
}
else
{
    //The recaptcha is not cheched
    //You can display an error message here
    alert('Oops, you have to check the recaptcha !');
}

</script>
2
répondu MUSTAPHA GHLISSI 2017-10-22 11:17:36

laissez le navigateur faire le travail pour vous! (basé sur la réponse de slinky2000)

remarque: ceci est seulement pour empêcher l'envoi d'une recaptcha' accidentellement ' non contrôlée. vous devez encore vérifier la recaptcha côté serveur parce qu'un bot n'a pas de soins ...

ajouter une balise de saisie invisible avec required=true attribut juste au-dessous du div.g-recaptcha.

<input id='recaptcha_check_empty' required tabindex='-1',
style='width:50px; height:0; opacity:0; pointer-events:none; 
position:absolute; 
bottom:0;'>

joindre les deux largeurs a divposition=relative; pointer le bottom:0; au-dessus vers le bas de recaptcha.

Maintenant, le Navigateur demande gentiment de remplir ce champ pointant vers le recapcha.

Maintenant, nous avons besoin de la fonction de rappel: 

<div class="g-recaptcha" data-callback="recaptchaCallback" ...

et

function recaptchaCallback() { 
    $('#recaptcha_check_empty').val(1);
}
1
répondu halfbit 2017-07-10 17:55:31

Pour vérifier si google recaptcha v2 est cochée ou pas, vous pouvez le faire par le code suivant : 

var checkCaptch = false;
     var verifyCallback = function(response) {
        if (response == "") {
             checkCaptch = false;
         }
         else {
             checkCaptch = true;
         }
     };
     $(document).ready(function() {
         $("#btnSubmit").click(function() {
             if (checkCaptch && grecaptcha.getResponse()!="") {
                  //Write your success code here
             }
         });
     })
1
répondu Manish Vadher 2018-06-20 05:55:50