web-dev-qa-db-fra.com

Comment puis-je faire de reCAPTCHA un champ obligatoire?

J'utilise Google reCAPTCHA et j'ai pu ajouter le composant CAPTCHA à ma page dans un formulaire. Mais lorsque je soumets le formulaire, aucune validation n'a lieu pour vérifier si le CAPTCHA a été résolu.

Comment puis-je valider que le composant CAPTCHA a été résolu lors de la soumission de mon formulaire? Ou, en d'autres termes, comment puis-je rendre mon composant CAPTCHA requis?

recaptcha
32
Baikare Sandeep

si vous voulez utiliser les popups html5 natifs, voici la solution

JavaScript:

window.onload = function() {
    var $recaptcha = document.querySelector('#g-recaptcha-response');

    if($recaptcha) {
        $recaptcha.setAttribute("required", "required");
    }
};

CSS:

#g-recaptcha-response {
    display: block !important;
    position: absolute;
    margin: -78px 0 0 0 !important;
    width: 302px !important;
    height: 76px !important;
    z-index: -999999;
    opacity: 0;
}
42
Fred

J'ai eu le même problème que le vôtre et l'ai résolu de cette façon:

Déclarez d'abord une variable qui stocke 1 ou 0 selon ou si l'utilisateur a correctement rempli le capcha.

var allowSubmit = false;

Ensuite, vous avez besoin d'une fonction qui est exécutée lorsque l'utilisateur remplit correctement le reCapcha:

function capcha_filled () {
    allowSubmit = true;
}

... et une fonction qui s'exécute à l'expiration de la session reCapcha:

function capcha_expired () {
    allowSubmit = false;
}

Pour informer reCapcha de vos fonctions (rappels), définissez ces data-attributes dans votre html:

<div class="g-recaptcha"
   data-callback="capcha_filled"
   data-expired-callback="capcha_expired"
   data-sitekey="your site key"></div>

Ou si vous utilisez une charge explicite:

  var onloadCallback = function() {
    grecaptcha.render('your_div_id', {
      'sitekey' : 'your_site_key',
      'callback': capcha_filled,
      'expired-callback': capcha_expired,
    });
  };

Vous avez également besoin d'un rappel pour la soumission du formulaire:

function check_if_capcha_is_filled (e) {
    if(allowSubmit) return true;
    e.preventDefault();
    alert('Fill in the capcha!');
}

Enfin, ajoutez sous la forme l'attribut onsubmit:

<form action="..." onsubmit="check_if_capcha_is_filled">

Remarque: comme mentionné dans les commentaires, un la validation du serveur est toujours nécessaire. Le code empêche de soumettre accidentellement le formulaire sauf si le capcha est rempli et niquement pour la commodité de l'utilisateur.

17
Al.G.

J'ai trouvé que c'était un moyen rapide et facile de le faire. Ajoutez ceci à vos en-têtes:

<script>
window.onload = function() {
  var recaptcha = document.forms["myForm"]["g-recaptcha-response"];
  recaptcha.required = true;
  recaptcha.oninvalid = function(e) {
    // do something
    alert("Please complete the captcha");
  }
}
</script>

Cela ne fonctionne qu'en HTML5 et est (ou devrait être) pris en charge par ces navigateurs: http://caniuse.com/#feat=form-validation

(La console JS dans Chrome affiche ce message d'erreur: "Contrôle de formulaire non valide" uniquement dans Google Chrome , et je n'ai pas pu contourner ce problème. Espérons que quelqu'un d'autre améliorera cette réponse.)

10
secenv

Je vérifie l'existence de # g-recaptcha-response:

function checkRecaptcha() {
    res = $('#g-recaptcha-response').val();

    if (res == "" || res == undefined || res.length == 0)
        return false;
    else
        return true;
}

//...

$('#frm-signup').submit(function(e) {

    if(!checkRecaptcha()) {
        $( "#frm-result" ).text("Please validate your reCAPTCHA.");
        return false;
    }
    //...
});

Cela devrait vraiment faire partie de la documentation ...

7
citynorman

Je ne sais pas si vous l'avez déjà résolu, mais vous pouvez utiliser un addon pour valider la recaptcha de Google: http://formvalidation.io/addons/recaptcha2/

1
ForTheWin

Je trouve cela très utile:

<div class="g-recaptcha myPopover" data-sitekey="Your Key" 
        data-callback="recaptchaCallback">

Vous ajoutez une fonction à data-callback = "recaptchaCallback" avec ce code:

var recaptchachecked=false; 
function recaptchaCallback() {
    recaptchachecked = true;
}

et une fonction où vous renvoyez la valeur pour l'utiliser dans une autre balise html comme celle-ci:

<form method="post" onsubmit="return isreCaptchaChecked()">
function isreCaptchaChecked()
{
    return recaptchachecked;
}

J'espère que ceci vous aide.

0
Alexander Stoldt

Si vous souhaitez un message plus convivial et descriptif, vous pouvez ajouter une case à cocher obligatoire. Cela garantira que la fenêtre contextuelle html5 affiche quelque chose comme: "Veuillez cocher cette case si vous souhaitez continuer"

<div class="captcha">
   <div class="g-recaptcha" data-sitekey="Your Site Key" data-callback="removeFakeCaptcha"></div>
   <input type="checkbox" class="captcha-fake-field" tabindex="-1" required>
</div>

Ajoutez le code pour supprimer le faux captcha une fois terminé

window.removeFakeCaptcha = function() {
   document.querySelector('.captcha-fake-field').remove();
}

Ensuite, sur le CSS, vous masquez la case à cocher et la positionnez dans la zone de captcha:

.captcha {
  position: relative;
}
.captcha-fake-field {
  background: transparent;
  bottom: 0;
  border: none;
  display: block;
  height: 1px;
  left: 12px;
  width: 1px;
  position: absolute;
  z-index: -1;
}
0
Cacobala