web-dev-qa-db-fra.com

Validation de formulaire HTML5 avant reCAPTCHA

J'ai intégré le nouveau framework caché reCAPTCHA (v2) qui, par défaut, vérifie l'utilisateur avec l'événement click du bouton d'envoi. Mais cet événement est déclenché avant la validation de formulaire HTML5 intégrée. Je cherche un moyen de le faire dans l'ordre attendu: validation du formulaire d'abord, reCAPTCHA après.

html5recaptchahtml5-validation
23
Julio Guerra

Vous devez le faire par programme grâce à une nouvelle méthode v2 grecaptcha: grecaptcha.execute() afin que recaptcha ne remplace pas l'événement de clic par défaut du bouton qui empêchait la validation du formulaire HTML5 par défaut.

Le chemin de l'événement est: 

  1. Soumettre un clic sur un événement: validation du formulaire intégré du navigateur
  2. Evénement de soumission de formulaire: call grecaptcha.execute()
  3. callback reCAPTCHA: soumettre le formulaire

$('#form-contact').submit(function (event) {
    event.preventDefault();
    grecaptcha.reset();
    grecaptcha.execute();
  });

function formSubmit(response) {
  // submit the form which now includes a g-recaptcha-response input
}
<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"></script>
<form action="?">
  <div class="g-recaptcha" 
       data-sitekey="your-key"
       data-size="invisible"
       data-callback="formSubmit">
  </div>
  <button type="submit">Submit</button>
</form>

30
Julio Guerra

Salut a une solution de travail ici. Travailler avec Invisible Recaptcha .

jQuery(document).ready(function() {
    var commentform = jQuery("#commentform");
    commentform.on("click", "#submit-comment", function(e) {
      if(commentform[0].checkValidity()) {
        e.preventDefault();
        grecaptcha.execute();
      }
    });
});

function submitCommentForm(data) {
    document.getElementById("commentform").submit();
}
<form action="blaba.php" method="post" id="commentform" class="comment-form">
  <div class="form-submit">
    <div data-callback="submitCommentForm" data-sitekey="yourkey" class="g-recaptcha" data-size="invisible">
    <button id="submit-comment">Leave a comment</button>
  </div>
</form>

4
Maxime

Voici ma solution pour obtenir la validation HTML5 + Invisible recaptcha:

HTML: 

<form id="my-form">
    <!-- Your form fields ... -->
    <div class="g-recaptcha"
        data-sitekey="..."
        data-callback="submitMyForm"
        data-size="invisible">
    </div>
    <button type="submit">Submit</button>
</form>

JS: 

var myForm = $('my-form');

function submitMyForm () {
    myForm.trigger('submit', [true]);
}

$(function () {
    myForm.on('submit', function (e, skipRecaptcha) {
        if(skipRecaptcha) {
            return;
        }

        e.preventDefault();
        grecaptcha.execute();
    });
  })
4
ByScripts

Je voulais le même comportement, mais en utilisant le nouveau recaptcha, l'invisible. Après avoir examiné du code et testé des éléments, je me suis lancé dans cette tâche. La principale différence est que utilise également la validation du navigateur par défaut:

var contact_form;
$(function() {
    contact_form = $('#contact-form');
    contact_form.submit(function (event) {
        if ( ! contact_form.data('passed')) {
            event.preventDefault();
            grecaptcha.execute();
        }
    });
});
function sendContactForm(token) {
    contact_form.data('passed', true);
    contact_form.submit();
}

Fondamentalement, il stocke l’objet fiche jquery dans une variable globale, y compris, il utilise sendContactForm comme rappel, mais lorsqu’il est appelé par recaptcha, il définit une donnée var nommée passed qui permet d’empêcher le formulaire. C'est exactement le même comportement que recaptcha aurait normalement, mais avec cette condition.

Update: revoir mon code me rappelle qu'il faut probablement un moyen de restaurer les données transmises à false après l'exécution de grecaptcha. Considérez cela si vous implémentez ceci.

1
giovannipds
 let siteKey = "...";
 $("form").submit(function (eventObj) {
        var myForm = this;
        eventObj.preventDefault();
        grecaptcha.execute( siteKey, {
            action: "submit"
        })
            .then(function (token) {
                $('<input />').attr('type', 'hidden')
                    .attr('name', "g_recaptcha_response")
                    .attr('value', token)
                    .appendTo(myForm);
                myForm.submit();
            });
    });

Cela va exécuter recapcha, attendre la réponse, ajouter l'attribut caché g_recaptcha_response à tout formulaire lorsque le navigateur essaie de le soumettre, puis de le soumettre. Vous avez besoin de la variable globale siteKey 

0
Zoran

J'ai eu ce problème car la méthode par défaut semble remplacer la validation du formulaire html5. Je voulais aussi que tout le code soit générique plutôt que de coder en dur les noms de fonctions/éléments. En fin de compte, j’ai eu le code suivant en utilisant l’application v3 api -

HTML

<form method="post" action="?" class="ui-recaptcha" name="my_form_name">
   ...
   <input type="submit" value="Submit">
</form>
<script src="//www.google.com/recaptcha/api.js?render={key}" async defer></script>

Javascript (j'utilise jQuery mais je serais assez facile à adapter à Vanilla js)

$('.ui-recaptcha').submit(e => {

    var form = e.target;

    if( $(form).data('recaptcha-done') )
        return;

    e.preventDefault();
    grecaptcha.execute('{key}', {'action': $(form).attr('name')}).then(token => {

        $(form).append($('<input>').attr({'type': 'hidden', 'name': 'g-recaptcha-response', 'value': token}));
        $(form).data('recaptcha-done', true);
        $(form).submit();
    });
});

J'ai découvert que le simple fait d'appeler submit comme dans certains exemples ci-dessus m'a provoqué une boucle, ce qui serait logique étant donné que le gestionnaire recaptcha est exécuté sur l'événement submit.

Cela exécute recaptcha pour tout formulaire ui-recaptcha, transmet l'attribut formulaire name à l'action visible dans la console reCaptcha, puis insère le jeton dans le formulaire. Une fois exécuté, il définit un attribut de données sur le formulaire afin que l'appel récursif à soumettre n'essaye pas d'exécuter recaptcha à nouveau.

0
USD Matt