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

Lesezeit: 4 Minuten

Benutzeravatar von Ryan Fung
Ryan Fung

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?

  • Ich nehme an, Sie könnten es mit Ajax tun

    Benutzer557846

    24. Juni 2015 um 3:52 Uhr

  • Ihr Zwilling: stackoverflow.com/questions/31016956/…

    Benutzer557846

    24. Juni 2015 um 3:54 Uhr

  • Ich stimme zu, aber was werde ich überhaupt tun, um den Ajax-Aufruf auszulösen? Und es braucht auch Zeit, um auszulösen.

    – Ryan Fung

    24. Juni 2015 um 3:55 Uhr

  • @Dagon Es ist eigentlich etwas anders, da ich möchte, dass es ein Ereignis ist, das in Javascript ausgelöst wird (ohne die Verwendung von Ajax). Ich überprüfe nicht, ob die Validierung korrekt ist, ich überprüfe, ob sie vor dem Absenden des Formulars eingegeben wurde.

    – Ryan Fung

    24. Juni 2015 um 3:57 Uhr

  • mögliches Duplikat von Wie kann ich reCAPTCHA zu einem Pflichtfeld machen?

    – Kristjan

    10. September 2015 um 5:19 Uhr

Benutzeravatar von jagad89
jagad89

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.

  • Danke, das spart mir viel Arbeit! BTW, da ist ein Fehler bei der Klammerung, sollte sein $("form").submit(function(event){ am Anfang und }); Am Ende.

    – Asuka165

    25. Juni 2015 um 19:55 Uhr


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

Benutzeravatar von Daniel Turuș
Daniel Turuș

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)
});

Kamerons Benutzeravatar
Kameron

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>

Benutzeravatar von Ali Raza Lilani
Ali Raza Lilani

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>

1430530cookie-checkFordern Sie den Benutzer auf, vor dem Absenden des Formulars auf das neue Recaptcha von Google zu klicken

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy