Wie kann ich reCAPTCHA zu einem Pflichtfeld machen?

Lesezeit: 4 Minuten

Benutzer-Avatar
Baikare Sandip

Ich verwende Google reCAPTCHA und konnte die CAPTCHA-Komponente meiner Seite in einem Formular hinzufügen. Aber wenn ich das Formular absende, findet keine Überprüfung statt, ob das CAPTCHA gelöst wurde.

Wie validiere ich, dass die CAPTCHA-Komponente gelöst wurde, wenn ich mein Formular absende? Oder anders gesagt, wie mache ich meine CAPTCHA-Komponente erforderlich?

  • Entschuldigung, gpullen, aber ich möchte reCAPTCHA als erforderliches Feld im Formular verwenden.

    – Baikare Sandip

    30. Dezember 2014 um 14:02 Uhr

  • Versuchen Sie es mit diesem Link – Wie man fragt.

    – Der blaue Hund

    31. Dezember 2014 um 20:55 Uhr

  • Das Posten Ihres Codes zusammen mit einem Link zur relevanten Google-Produktseite wäre für alle weitaus nützlicher als das Posten eines animierten GIFs. Vielen Dank.

    – Funkelnd

    31. Dezember 2014 um 21:05 Uhr

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.

Die akzeptierte Antwort hat keine Validierungstechnik für den Ablauf des Captchas, die folgende Lösung adressiert dies.

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('captcha-verified')
    /*
     * 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>

Ich habe auf die Existenz von #g-recaptcha-response geprüft:

function checkRecaptcha() {
    res = $('#g-recaptcha-response').val();

    if (res == "" || res == undefined || res.length == 0)
        return false;
    else
        return true;
}

//...

$('#frm-signup').submit(function(e) {

    if(!checkRecaptcha()) {
        $( "#frm-result" ).text("Please validate your reCAPTCHA.");
        return false;
    }
    //...
});

Das sollte eigentlich in die Doku gehören…

Ich hatte das gleiche Problem wie du und habe es so gelöst:

Deklarieren Sie zuerst eine Variable, die speichert 1 oder 0 abhängig davon, ob der Benutzer das Capcha richtig ausgefüllt hat.

var allowSubmit = false;

Dann benötigen Sie eine Funktion, die ausgeführt wird, wenn der Benutzer das reCapcha korrekt ausfüllt:

function capcha_filled () {
    allowSubmit = true;
}

… und eine Funktion, die ausgeführt wird, wenn die reCapcha-Sitzung abläuft:

function capcha_expired () {
    allowSubmit = false;
}

Um reCapcha Ihre Funktionen (Callbacks) mitzuteilen, setzen Sie diese data-Attribute in Ihrem HTML:

<div class="g-recaptcha"
   data-callback="capcha_filled"
   data-expired-callback="capcha_expired"
   data-sitekey="your site key"></div>

Oder wenn Sie explizites Laden verwenden:

  var onloadCallback = function() {
    grecaptcha.render('your_div_id', {
      'sitekey' : 'your_site_key',
      'callback': capcha_filled,
      'expired-callback': capcha_expired,
    });
  };

Sie benötigen auch einen Rückruf für die Formularübermittlung:

function check_if_capcha_is_filled (e) {
    if(allowSubmit) return true;
    e.preventDefault();
    alert('Fill in the capcha!');
}

Fügen Sie schließlich im Formular die hinzu onsubmit Attribut:

<form action="..." onsubmit="check_if_capcha_is_filled">

Notiz: wie in den Kommentaren erwähnt, a Die Servervalidierung ist noch erforderlich. Der Code verhindert das versehentliche Absenden des Formulars, es sei denn, das Capcha ist ausgefüllt und dient nur der Bequemlichkeit des Benutzers.

Wenn Sie eine freundlichere und beschreibendere Nachricht wünschen, können Sie ein erforderliches Kontrollkästchen hinzufügen. Dadurch wird sichergestellt, dass das HTML5-Popup Folgendes anzeigt: “Bitte aktivieren Sie dieses Kontrollkästchen, wenn Sie fortfahren möchten”

<div class="captcha">
   <div class="g-recaptcha" data-sitekey="Your Site Key" data-callback="removeFakeCaptcha"></div>
   <input type="checkbox" class="captcha-fake-field" tabindex="-1" required>
</div>

Fügen Sie den Code hinzu, um das gefälschte Captcha nach Abschluss zu entfernen

window.removeFakeCaptcha = function() {
   document.querySelector('.captcha-fake-field').remove();
}

Dann blenden Sie im CSS das Kontrollkästchen aus und positionieren es in der Captcha-Box:

.captcha {
  position: relative;
}
.captcha-fake-field {
  background: transparent;
  bottom: 0;
  border: none;
  display: block;
  height: 1px;
  left: 12px;
  width: 1px;
  position: absolute;
  z-index: -1;
}

  • Hat perfekt funktioniert!

    – MD. Atiqur Rahman

    27. September 2020 um 2:57 Uhr

1005990cookie-checkWie kann ich reCAPTCHA zu einem Pflichtfeld machen?

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

Privacy policy