wake-up-neo.com

Google UNISIBLE reCaptcha + jQuery validate () - Problem

Ich habe neue Googles INVISIBLE reCaptcha auf mehreren Websites erfolgreich implementiert, es kollidiert jedoch mit jQuery validate (), so dass die js-Validierung nicht mehr auf button/form submit ausgeführt wird und reCaptcha sofort startet . Wenn der Benutzer vergisst, ein erforderliches Formularfeld auszufüllen, muss er auf die Antwort des Servers warten und beim nächsten Mal darauf zurückgreifen.

jQuery .validate () unterstützt Callback, aber da es in einer internen Klasse eines CMS hartcodiert ist, kann ich es irgendwie außerhalb ändern (z. B. vom Frontend-Thema, beim Laden von Dokumenten, wann) Bestätigungscode ist bereits gerendert)?

Eine andere Idee wäre, den Callback von Captcha irgendwie zu verschieben, so dass der Validierungsschritt die Chance hat, ausgeführt zu werden.

Vielen Dank!

jQuery Validate form: (im Kern hartcodiert, kann nicht geändert werden, es sei denn, ich bearbeite die Kerndatei oder erweitere die Klasse/Klon-Funktion - nicht optimal)

<script type="text/javascript">
$(document).ready(function(){
    $("form[name=comment_form]").validate({
        rules: {
            body: {
                required: true,
                minlength: 1
            },
            authorEmail: {
                required: true,
                email: true
            }
        },
        wrapper: "li",
        errorLabelContainer: "#comment_error_list",
        invalidHandler: function(form, validator) {
            $('html,body').animate({ scrollTop: $('#comment_error_list').offset().top }, { duration: 250, easing: 'swing'});
        },
        submitHandler: function(form){
            $('button[type=submit], input[type=submit]').attr('disabled', 'disabled');
            form.submit();
        }
    });
});
</script>

reCaptcha explizites Rendern:

<script type='text/javascript'>
    var renderInvisibleReCaptcha = function() {
    for (var i = 0; i < document.forms.length; ++i) {
        var form = document.forms[i];
        var holder = form.querySelector('.invisible-recaptcha');
        if (null === holder) continue;
        (function(frm){
            var holderId = grecaptcha.render(holder, {
            'sitekey': 'my-key-here',
            'badge': 'inline',
            'size': 'invisible',
            'callback': function (recaptchaToken) {HTMLFormElement.prototype.submit.call(frm);},
            'expired-callback': function(){grecaptcha.reset(holderId);}
            });
            frm.onsubmit = function (evt){evt.preventDefault();grecaptcha.execute(holderId);};
        })(form);
    }
};
</script>
6
dev101

Ich hatte ein ähnliches Problem und bestätigte das Formular, bevor ich invisible reCaptcha mit Hilfe dieses von Terry bereitgestellten Links ausführte.

Hier sind die Schritte:

Fügen Sie dieses Div vor dem Senden-Button in Ihrem Formular ein

 <div id='recaptcha' class="g-recaptcha"
      data-sitekey="your_site_key"
      data-callback="onSubmit"
      data-size="invisible"></div>

Aktualisieren Sie auch Ihren Schlüssel. Fügen Sie nach dem Formularabschluss diese Methode hinzu

<script>onload();</script>

Fügen Sie vor Ihrem Formular diesen Code hinzu

<script>
function validate(event) {
 event.preventDefault();
 if (!document.getElementById('field').value) {
   alert("You must add text to the required field");
 } else {
   grecaptcha.execute();
 }
}

function onload() {
 var element = document.getElementById('submit');
 element.onclick = validate;
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Führen Sie alle Validierungen in der Validate-Methode durch. Wenn alle Validierungen erfolgreich sind, führen Sie Captcha aus. 

6
Abdul Jamil

Ich hatte das gleiche Problem und fand schließlich den richtigen Weg, um jquery validate mit unsichtbarem reCaptcha zu integrieren. Es ist eine Mischung aus einigen der hier vorgeschlagenen Lösungen. 

Zunächst der HTML-Teil:

<div class="g-recaptcha" data-sitekey="<your key here>"
    data-size="invisible" 
    data-callback="formSubmit">
</div>

Dann müssen Sie den reCaptcha-Callback auf diese Weise implementieren:

function formSubmit(response) {
    // submit the form which now includes a g-recaptcha-response input
     $("#orderform").submit();
    return true;
}

Und schließlich ist der schwierige Teil in dem submitHandler der Jquery validate:

   submitHandler: function (form) {
        if (grecaptcha.getResponse()) {
                // 2) finally sending form data
                form.submit();
        }else{
                // 1) Before sending we must validate captcha
            grecaptcha.reset();
            grecaptcha.execute();
        }           
    }

Die Reihenfolge ist wie folgt:

  1. Wenn der Benutzer auf die Schaltfläche "Senden" klickt, wird der "submitHandler" von jquery aufgerufen, da Invisible recaptcha noch nicht ausgeführt wird. Wir rufen "grecaptcha.execute () ..__" auf. Es dauert einige Sekunden, bis Google Recaptcha überprüft hat und wenn .__ vollständig validiert, wird formSubmit Callback aufgerufen (obwohl dieser Callback nicht aufgerufen wird, können wir keine Formulardaten an den Server senden!).
  2. In formSubmit callback rufen wir $ ('# orderform') auf. Submit to force SubmitHandler erneut eingeben. 
  3. In submitHandler, diesmal als Grecaptcha.getResponse ist nicht null, können wir die Formulardaten an den Server senden. Er enthält das recaptcha hidden-Feld, das auf der Serverseite validiert werden muss .

Hoffe das hilft.

5
Joan Fabre Gras

Was für mich funktionierte, war die Verwendung von Jquery zum Auswählen des Formulars (ich hatte getElementByID verwendet) und dann "true zurückgeben". Also stattdessen:

        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
        <script>
            function onSubmit(token) {
                document.getElementById("frm").submit();
            }
        </script>
        <button class="g-recaptcha btn btn-block btn-primary" data-sitekey="<YOUR_KEY>" data-callback='onSubmit'>Submit</button>

benutze das:

        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
        <script>
            function onSubmit(token) {
                $("#frm").submit();
                return true;
            }
        </script>
        <button class="g-recaptcha btn btn-block btn-primary" data-sitekey="<YOUR_KEY>" data-callback='onSubmit'>Submit</button>
0
dstark

Technisch wollen wir "wirklich" die Herausforderung programmatisch an einen Button binden. Zum Beispiel:

Fügen Sie diese Methode hinzu, die nur die unsichtbare Grecaptcha anstelle der "echten" Validierung ausführen soll

 jQuery.validator.addMethod("iv_recapcha_valid", function(value, element) {
        return grecaptcha.execute();
    }, 'No message needed, grecaptcha excecuted'); 

Fügen Sie diese Regel dann zu Ihren vorhandenen Regeln hinzu

rules: { gRecaptchaResponse: { iv_recapcha_valid: true } }

füge ein verstecktes Feld hinzu

<input type="hidden" name="gRecaptchaResponse" value="" >

"Technisch" ist die Schaltfläche "Senden" nun an die Klickaktion des Benutzers gebunden 

https://developers.google.com/recaptcha/docs/invisible

Ich hatte das gleiche Problem bei der Arbeit mit der klassischen Asp.Net Core MVC-Vorlage ..__, die intern von der Unobstrusive Validation dekoriert wurde Funktionieren Sie mithilfe der integrierten Validierung, ohne dass für jedes Feld eine Validierung angegeben werden muss (abgeleitet von der Modellklasse in das MVC-Projekt).

HTML-Seite:

 <input type="hidden" name="gRecaptchaResponse" id="gRecaptchaResponse" value="" /> 

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <div id='recaptcha' class="g-recaptcha"
                         data-sitekey="@_configuration["InvisibleRecaptcha:SiteKey"]"
                         data-callback="SubmitRegistration"
                         data-size="invisible"></div>
                    <button type="submit" id="SubmitButton" class="btn btn-primary"> Invia</button>
                </div>
            </div>

Javascript-Code:

 <script>

        function onload() {
            var element = document.getElementById('SubmitButton');
            element.onclick = validate;
        }
        onload();

        function validate(event) {
            event.preventDefault();

            $("#Form").validate();
            var isFormValid = $("#Form").valid();
            if (isFormValid) {
                grecaptcha.execute();
            }
        }

        function SubmitRegistration(data) {
            if ($("#gRecaptchaResponse").val() == '') {
                $("#gRecaptchaResponse").val(data);
            }
            document.getElementById("Form").submit();
        }  

    </script>

Ich hoffe, dieser Code kann jemandem helfen

0