Wie kann ich js einchecken, dass der Nutzer das Kontrollkästchen in Google Recaptcha aktiviert hat?

Ich habe vor dem Ende des Kopfes Folgendes hinzugefügt

<script src='https://www.google.com/recaptcha/api.js'></script>

Ich habe dies vor dem Ende des Formulars hinzugefügt

<div class="g-recaptcha" data-sitekey="== xxxxxx =="></div>

Ich kann das Recaptcha ähnlich wie https://developers.google.com/recaptcha/ sehen.

Wenn der Benutzer jedoch Daten drückt, ohne das Kontrollkästchen zu aktivieren, werden die Daten gesendet. Gibt es einen anderen Code, den ich hinzufügen muss, um zu überprüfen, ob der Benutzer das Kontrollkästchen aktiviert hat? Hoffentlich in js?

Google hat eine Rückrufoption, wenn das Kontrollkästchen aktiviert ist.

Fügen Sie dies Ihrem Formularelement hinzu:

data-callback="XXX"

Beispiel:

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

Und ein Deaktivierungsattribut für Ihre Senden-Schaltfläche.

Beispiel:

<button id="submitBtn" disabled>Submit</button>

Erstellen Sie dann eine Rückruffunktion und schreiben Sie den gewünschten Code.

Beispiel:

function recaptchaCallback() {
    $('#submitBtn').removeAttr('disabled');
};

Sie können auch das zu überprüfende grecaptcha-Objekt aufrufen. grecaptcha.getResponse();ist leer, wenn nicht markiert, und hat den Bestätigungscode, wenn aktiviert.

grecaptcha.getResponse().length === 0 wenn nicht markiert

function isCaptchaChecked() {
  return grecaptcha && grecaptcha.getResponse().length !== 0;
}

if (isCaptchaChecked()) {
  // ...
}

Um zu überprüfen, ob Google Recaptcha aktiviert ist oder nicht, können Sie dies mit dem folgenden Code tun:

<script>

if(grecaptcha && grecaptcha.getResponse().length > 0)
{
     //the recaptcha is checked
     // Do what you want here
     alert('Well, recaptcha is checked !');
}
else
{
    //The recaptcha is not cheched
    //You can display an error message here
    alert('Oops, you have to check the recaptcha !');
}

</script>

Um zu überprüfen, ob Google Recaptcha v2 aktiviert ist oder nicht, können Sie dies mit dem folgenden Code tun:

var checkCaptch = false;
     var verifyCallback = function(response) {
        if (response == "") {
             checkCaptch = false;
         }
         else {
             checkCaptch = true;
         }
     };
     $(document).ready(function() {
         $("#btnSubmit").click(function() {
             if (checkCaptch && grecaptcha.getResponse()!="") {
                  //Write your success code here
             }
         });
     })

Lassen Sie den Browser die Arbeit für Sie erledigen! (basierend auf der Antwort von slinky2000)

Hinweis: Dies dient nur dazu, das Senden einer "versehentlich" ungeprüften Wiederholung zu verhindern. Sie müssen das Recaptcha noch auf der Serverseite überprüfen, da es einem Bot egal ist ...

Fügen Sie ein unsichtbares Eingabe-Tag mit einem required=trueAttribut direkt unter dem hinzu div.g-recaptcha.

<input id='recaptcha_check_empty' required tabindex='-1',
style='width:50px; height:0; opacity:0; pointer-events:none; 
position:absolute; 
bottom:0;'>

Schließen Sie beide Breiten a divmit ein position=relative;, um das bottom:0;Obige auf den Boden von Recaptcha zu zeigen.

Jetzt bittet der Browser freundlich, dieses Feld auszufüllen und auf die Zusammenfassung zu zeigen.

Jetzt brauchen wir den Rückruf:

<div class="g-recaptcha" data-callback="recaptchaCallback" ...

und

function recaptchaCallback() { 
    $('#recaptcha_check_empty').val(1);
}