it-swarm.com.de

Google ReCAPTCHA wie erforderlich machen?

Weiß jemand, wie man " Google ReCAPTCHA (v2) " in einer form "erforderlich" macht?

Ich meine keine Formularabgabe, bis Recaptcha ausgefüllt ist?

Ich benutze ParsleyJs in meinem Formular, habe aber keinen Weg gefunden, damit es mit divs funktioniert ...

12
serhio

Sie müssen den Rückruf der reCaptcha Verify-Antwort 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 */
    }
})
15
colecmc

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

In diesem Beispiel werde ich zwei HTML-Elemente innerhalb des Formulars erstellen:

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

botvalidator enthält das Kontrollkästchen "Ich bin kein Roboter" in google recaptcha iframe. Captchaerrors enthalten Fehler, nachdem überprüft wurde, dass der Benutzer das Kontrollkästchen "Ich bin kein Roboter" nicht aktiviert hat.

WICHTIG: Wir verwenden die Arrival.js-Bibliothek, um zu erfahren, wann Google Recaptcha ein neues Textarea-Element für G-Recaptcha-Antworten in das DOM hinzufügt, da frühere DOM-Validierungen für neue Knoteneinfügungen nicht mehr gültig sind. Dieses Ereignis tritt ein, nachdem ein Recaptcha für einige Minuten auf die Seite geladen wurde.

Sie können die arrival.js-Bibliothek von folgender Adresse herunterladen: 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 benutze 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 andere 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.

1
libnac

Für ParsleyJS werden Sie eine kleine Abhilfe schaffen:

1.Fügen Sie das ausgeblendete Eingabefeld mit data-parsley-required="true", value = "" wie folgt hinzu:

<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 Ihrem g-recaptcha div):

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

3.Fügen Sie diese einfache Funktion irgendwo in Ihren js-Code ein:

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

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

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

Eine Regel erstellen https://laravel.com/docs/5.7/validation#custom-validation-rules

Dann verwenden Sie es in Ihrem Controller

// validation
$this->validate( $request, array(
    'g_recaptcha_response' => ['required', 'string', new Captcha()]
));
0
Jquestions