Google ReCAPTCHA wie erforderlich machen?

Weiß jemand wie man das “Google ReCAPTCHA (v2)„erforderlich“ sein in a form?

Ich meine, keine Formularübermittlung, bis Recaptcha ausgefüllt ist?

Ich verwende ParsleyJs in meinem Formular, habe aber keinen Weg gefunden, damit es funktioniert divS…

Sie müssen den Rückruf der reCaptcha-Verifizierungsantwort verwenden. Etwas wie das: <script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit"></script>

var RC2KEY = 'sitekey',
    doSubmit = false;

function reCaptchaVerify(response) {
    if (response === document.querySelector('.g-recaptcha-response').value) {
        doSubmit = true;
    }
}

function reCaptchaExpired () {
    /* do something when it expires */
}

function reCaptchaCallback () {
    /* this must be in the global scope for google to get access */
    grecaptcha.render('id', {
        'sitekey': RC2KEY,
        'callback': reCaptchaVerify,
        'expired-callback': reCaptchaExpired
    });
}

document.forms['form-name'].addEventListener('submit',function(e){
    if (doSubmit) {
        /* submit form or do something else */
    }
})

Für PetersilieJS Sie werden eine kleine Problemumgehung durchführen:

1.Verstecktes Eingabefeld hinzufügen, mit data-parsley-required="true", value = ""so was:

<input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">

2. Fügen Sie einen Fehlercontainer hinzu (direkt unter oder unter Ihrer g-recaptcha div):

<span id='errorContainer'></span>

3. Fügen Sie diese einfache Funktion irgendwo in Ihrem js-Code hinzu:

function recaptchaCallback() {
    document.getElementById('myField').value="nonEmpty";
}

4.Fügen Sie das Attribut hinzu data-callback mit Wert der benutzerdefinierten Funktion:

<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>

Ein weiteres Arbeitsbeispiel finden Sie hier: https://codepen.io/reactionmedia/pen/JVdmbB

Für dieses Beispiel werde ich zwei HTML-Elemente innerhalb des Formulars erstellen:

<div id="botvalidator"></div>
<div id="captchaerrors"></div>

botvalidator enthält den Google-Recaptcha-Iframe mit dem Kontrollkästchen “Ich bin kein Roboter”.
Captcha-Fehler enthält Fehler, nachdem überprüft wurde, ob der Benutzer nicht auf das Kontrollkästchen „Ich bin kein Roboter“ geklickt hat.

WICHTIG: Wir verwenden die arrival.js-Bibliothek, um zu wissen, wann Google Recaptcha ein neues g-recaptcha-response-Textarea-Element im DOM hinzufügt, da frühere DOM-Validierungen zum Einfügen neuer Knoten nicht mehr gültig sind. Dieses Ereignis tritt auf, nachdem Recaptcha einige Minuten lang in die Seite geladen wurde.

Sie können die arrival.js-Bibliothek herunterladen von:
https://github.com/uzairfarooq/arrive/

oder fügen Sie es direkt vom CDN-Anbieter ein, zum Beispiel:
https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js

Denken Sie daran, nach dem Laden der JQUERY-Bibliothek ALLE Bibliotheken einzufügen, um Fehler zu vermeiden. Ich verwende Jquery 2.2.4-Version

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

Eine weitere wichtige Sache ist, sich daran zu erinnern, die Recaptcha-Bibliothek auf diese Weise geladen zu haben, um die onloadCallback-Funktion nach dem Laden von Recaptcha auszuführen und Recaptcha “manuell” zu rendern.

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>

Hier ist das Code-Snippet:

var onloadCallback = function() {
        /**
         * If we try to load page to show the congrats message we don't need to load recaptcha.
         */
        if($("#botvalidator").length > 0) {
            grecaptcha.render('botvalidator', {
                'sitekey' : '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
                'callback': cleanErrors
            });
            addCaptchaValidation();
            /**
             * We are going to use arrive library in order to check new google recaptcha
             * element added after the current one is expired and then we will create new attributes for that element.
             * Expires-callback google recaptcha is not working, probably it is executed before element creation.
             * https://github.com/uzairfarooq/arrive/
             */
            $(document).arrive("#g-recaptcha-response", function() {
                // 'this' refers to the newly created element
                addCaptchaValidation();
            });
        }
    };

        /**  We are going to remove all errors from the container. */
    var cleanErrors = function() {
        $("#captchaerrors").empty();
    };
    
    var addCaptchaValidation = function() {
        console.log("Adding captcha validation");
        
        cleanErrors();

        $('#myform').parsley().destroy();

        $('#g-recaptcha-response').attr('required', true);
        // We are going to create a new validator on Parsley
        $('#g-recaptcha-response').attr('data-parsley-captcha-validation', true);
        $('#g-recaptcha-response').attr('data-parsley-error-message', "We know it, but we need you to confirm you are not a robot. Thanks.");
        $('#g-recaptcha-response').attr('data-parsley-errors-container', "#captchaerrors");
    $('#myform').parsley();
    };
    

    /** We are going to add a new Parsley validator, this validation is called from
    #g-recaptcha-response after clicking the submit button*/

    window.Parsley.addValidator('captchaValidation', {

            validateString: function(value) {
                if(debug) console.log("Validating captcha", value);
                if(value.length > 0) {
                    return true;
                } else {
                    return false;
                }                    
            },
            messages: {en: 'We know it, but we need you to confirm you are not a robot. Thanks.'}
          });

<html>
<head>
</head>
<body>
<h1>Parsley and Google Recaptcha Example</h1>
<form id="myform">
  Full name
  <input type="text" name="name" id="name" data-parsley-required="true">
  <br/>
<div id="botvalidator"></div>
<div id="captchaerrors"></div><br/>
  <input type="submit" value="Submit Form">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.2/parsley.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
</body>
</html>

Das war’s Leute.