web-dev-qa-db-fra.com

Obliger l'utilisateur à cliquer sur la nouvelle recaptcha de google avant de soumettre le formulaire

J'utilise la nouvelle recaptcha de google dans mon formulaire (HTML5): https://www.google.com/recaptcha

Existe-t-il un moyen de vérifier et de marquer recaptcha comme requis avant la soumission du formulaire? Je veux valider cela côté client au lieu de côté serveur. De cette façon, je n'ai pas besoin de revenir au formulaire et d'avertir l'utilisateur de ne rien saisir pour le captcha.

Tout javascript que je peux utiliser pour vérifier si l'utilisateur saisit quoi que ce soit dans recaptcha?

javascriptphpformsrecaptcha
17
Ryan Fung

Vous pouvez vérifier le champ textarea avec l'ID g-recaptcha-response. Vous pouvez procéder comme suit:

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

   var recaptcha = $("#g-recaptcha-response").val();
   if (recaptcha === "") {
      event.preventDefault();
      alert("Please check the recaptcha");
   }
});

J'espère que cela vous aidera.

50
jagad89

Une implémentation JavaScript Vanilla utilisant des parties de la solution d'Ankesh et de Lammert:

var form = document.getElementById('ctct-custom-form');
form.addEventListener("submit", function(event){
    if (grecaptcha.getResponse() === '') {                            
      event.preventDefault();
      alert('Please check the recaptcha');
    }
  }
, false);

Crédit pour le code d'écoute de soumission de formulaire: Comment puis-je écouter l'événement de soumission de formulaire en javascript?

8
rylanb

grecaptcha.getResponse() - Renvoie la réponse pour le Recaptcha. Vous pouvez vérifier cela dans des conditions telles que

grecaptcha.getResponse(opt_widget_id) === ""

ID de widget facultatif, par défaut le premier widget créé s'il n'est pas spécifié.

Réf: https://developers.google.com/recaptcha/docs/display

3
Ankesh Mistry

J'ai essayé d'améliorer la réponse de Rylanb. Le code ci-dessous trouve tous les formulaires de la page qui ont activé g-captcha et empêchent la soumission. Remarque: il suppose que votre div.g-recaptcha est l'enfant de form

const forms = document.querySelectorAll('div.g-recaptcha');
forms.forEach(form=> {
    const formParentElement = form.parentElement;

    formParentElement.addEventListener("submit", e => {
        if (grecaptcha.getResponse() === '') {
            e.preventDefault();
            alert('Please check the recaptcha');
        }
    }, false)
});
2
Daniel Turuș