Fordern Sie den Benutzer auf, vor dem Absenden des Formulars auf das neue Recaptcha von Google zu klicken

Ich verwende das neue Recaptcha von Google in meinem Formular (HTML5):
https://www.google.com/recaptcha

Gibt es eine Möglichkeit, Recaptcha vor dem Absenden des Formulars zu überprüfen und als erforderlich zu markieren? Ich möchte dies clientseitig statt serverseitig validieren. Auf diese Weise muss ich nicht zum Formular zurückkehren und den Benutzer warnen, nichts für das Captcha einzugeben.

Irgendein Javascript, mit dem ich überprüfen kann, ob Benutzer etwas in Recaptcha eingeben?

Sie können das Textfeld mit der ID überprüfen g-recaptcha-response. Sie können wie folgt vorgehen:

$("form").submit(function(event) {

   var recaptcha = $("#g-recaptcha-response").val();
   if (recaptcha === "") {
      event.preventDefault();
      alert("Please check the recaptcha");
   }
});

Hoffe das hilft dir.

Eine einfache JavaScript-Implementierung, die Teile der Lösung von Ankesh und Lammert verwendet:

var form = document.getElementById('ctct-custom-form');
form.addEventListener("submit", function(event){
    if (grecaptcha.getResponse() === '') {                            
      event.preventDefault();
      alert('Please check the recaptcha');
    }
  }
, false);

Gutschrift für Listener-Code für die Formularübermittlung: Wie kann ich das Formularübermittlungsereignis in Javascript abhören?

grecaptcha.getResponse() – Gibt die Antwort für das Recaptcha zurück. Sie können dies unter Bedingungen überprüfen, z

grecaptcha.getResponse(opt_widget_id) === ""

Optionale Widget-ID, standardmäßig das erste erstellte Widget, falls nicht angegeben.

Ref: https://developers.google.com/recaptcha/docs/display

Ich habe versucht, die Antwort von Rylanb zu verbessern. Der folgende Code findet alle Formulare auf der Seite, bei denen G-Captcha aktiviert ist, und verhindert die Übermittlung. Hinweis: Es wird davon ausgegangen, dass Ihre div.g-recaptcha ist das Kind von form

const forms = document.querySelectorAll('div.g-recaptcha');
forms.forEach(form=> {
    const formParentElement = form.parentElement;

    formParentElement.addEventListener("submit", e => {
        if (grecaptcha.getResponse() === '') {
            e.preventDefault();
            alert('Please check the recaptcha');
        }
    }, false)
});

Arbeitslösung im Jahr 2022

Persönlich konnte ich keine der oben genannten Lösungen mit meinem Captcha zum Laufen bringen. Also dachte ich, ich würde meine aktuelle Arbeitslösung für diejenigen teilen, die mit dem gleichen Problem konfrontiert sind.

Meine Notizen in der .js sollte die Lösung ausführlich erklären.

JavaScript

// By default do not allow form submission.
var allow_submit = false

function captcha_filled () {
    /*
     * This is called when Google get's the recaptcha response and approves it.
     * Setting allow_submit = true will let the form POST as normal.
     * */

    allow_submit = true
}

function captcha_expired () {
    /*
     * This is called when Google determines too much time has passed and expires the approval.
     * Setting allow_submit = false will prevent the form from being submitted.
     * */

    allow_submit = false
}


function check_captcha_filled (e) {
    console.log('verify-captcha')
    /*
     * This will be called when the form is submitted.
     * If Google determines the captcha is OK, it will have
     * called captcha_filled which sets allow_submit = true
     * If the captcha has not been filled out, allow_submit
     * will still be false.
     * We check allow_submit and prevent the form from being submitted
     * if the value of allow_submit is false.
     * */

    // If captcha_filled has not been called, allow_submit will be false.
    // In this case, we want to prevent the form from being submitted.
    if (!allow_submit) {
        // This call prevents the form submission.
        // e.preventDefault()

        // This alert is temporary - you should replace it with whatever you want
        // to do if the captcha has not been filled out.
        alert('ERROR: Please verify you are human by filling out the captcha')

        return false
    }
    captcha_expired()
    return true
}

HTML

<form action="post" onsubmit="return check_captcha_filled()">
<!-- form items -->
<div class="g-recaptcha"
   data-callback="captcha_filled"
   data-expired-callback="captcha_expired"
   data-sitekey="your site key">
</div>
</form>

Der einfachste Weg, dies zu tun, ist, die Art der Schaltfläche zu ändern.

    <button class="theme-btn" type="button" onclick="checkForm()" id="sign_up_button" >

Erstellen Sie jetzt eine Java-Script-Funktion, um die Art der Übermittlung bei der Validierung zu ändern.

<script type="text/javascript">

// NoCaptcha-Funktion

    function checkForm(){
      
        if(!document.getElementById("g-recaptcha-response").value){
            alert("Please Prove ! You're not a Robot");
            return false;
        }else{
            document.getElementById("sign_up_button").type = "submit";                
            return true;
        }
    }

 </script>