wake-up-neo.net

HTML5-Formularvalidierung vor reCAPTCHA

Ich habe das neue verborgene reCAPTCHA (v2) -Framework integriert, das den Benutzer standardmäßig mit dem click-Ereignis des Submit-Buttons überprüft. Dieses Ereignis wird jedoch vor der integrierten HTML5-Formularüberprüfung ausgelöst. Ich suche nach einem Weg, um es in der erwarteten Reihenfolge zu machen: erst Formvalidierung, danach reCAPTCHA.

23
Julio Guerra

Sie müssen dies programmgesteuert tun, dank einer neuen v2 grecaptcha-Methode: grecaptcha.execute(), damit recaptcha das standardmäßige click -Ereignis der Schaltfläche nicht ersetzt, wodurch die standardmäßige HTML5-Formularüberprüfung verhindert wurde.

Der Ereignispfad lautet: 

  1. Klickereignis für die Schaltfläche "Senden": In Browser integrierte Formularüberprüfung
  2. Formular absenden Ereignis: Aufruf grecaptcha.execute()
  3. reCAPTCHA-Rückruf: Senden Sie das Formular

$('#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

Hallo, ich habe hier eine funktionierende Lösung. Arbeiten mit unsichtbarem 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

Hier ist meine Lösung für die HTML5-Validierung + 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

Ich wollte dasselbe Verhalten, aber das neue Recaptcha, das unsichtbare. Nachdem ich mir ein paar Codes angesehen und ein paar Dinge getestet hatte, kam ich in das Thema. Der Hauptunterschied ist, dass diese auch die Standard-Browser-Überprüfung verwendet :

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();
}

Es speichert das Jquery-Formularobjekt grundsätzlich in einer globalen Variable, einschließlich sendContactForm als Callback. Wenn es jedoch vom Recaptcha aufgerufen wird, wird eine Datenvariable mit dem Namen passed festgelegt, wodurch das Formular nicht verhindert werden kann. Es ist genau das gleiche Verhalten, das Recaptcha normalerweise tun würde, aber mit dieser Bedingung.

Update : Wenn Sie sich meinen Code richtig ansehen, werden Sie darauf hingewiesen, dass wahrscheinlich Daten wiederhergestellt werden müssen, die nach der Ausführung von grecaptcha an false übergeben wurden. Bedenken Sie das, wenn Sie dies implementieren.

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();
            });
    });

Dadurch wird recapcha ausgeführt, auf Antwort gewartet, das versteckte Attribut g_recaptcha_response zu jedem Formular hinzugefügt, wenn der Browser versucht, es zu senden, und es dann tatsächlich übermittelt. Sie benötigen die globale Variable siteKey 

0
Zoran

Ich hatte dieses Problem, da die Standardmethode die HTML5-Formularüberprüfung überschreibt. Ich wollte auch, dass der gesamte Code generisch ist, anstatt alle Funktionen/Elementnamen fest zu codieren. Am Ende kam mir folgender Code mit der 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 (Ich verwende jQuery, wäre aber ziemlich einfach an Vanilla js anzupassen)

$('.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();
    });
});

Ich habe festgestellt, dass der Aufruf von submit wie in einigen Beispielen oben eine Schleife für mich verursacht hat. Dies würde einen Sinn ergeben, wenn der Recaptcha-Handler für das Ereignis submit ausgeführt wird.

Dies führt recaptcha für jedes ui-recaptcha-Formular aus, übergibt das form name-Attribut als Aktion, die in der reCaptcha-Konsole angezeigt wird, und fügt das Token dann in das Formular ein. Nach dem Ausführen wird ein Datenattribut im Formular festgelegt, sodass der rekursive Aufruf zum Senden nicht erneut versucht, Recaptcha auszuführen.

0
USD Matt