Neues reCaptcha mit jQuery Validation Plugin

Lesezeit: 10 Minuten

Benutzer-Avatar
blauantinoo

Ich habe gesucht und kann nicht herausfinden, wie validieren Sie das neue reCaptchavor dem Absenden des Formulars, zusammen mit der Validierungsfunktion von jQuery-Validierungs-Plugin.

Meine Absicht:

    $.validator.addMethod('reCaptchaMethod', function (value, element, param) {
            if (grecaptcha.getResponse() == ''){
                return false;
            } else {
                // I would like also to check server side if the recaptcha response is good
                return true
            }
        }, 'You must complete the antispam verification');


    $("#form").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                email: {
                    required: true,
                    email: true
                },
                reCaptcha: {
                    reCaptchaMethod: true   
                }
            },
            messages: {
                name: "Please fill your name",
                email: "Please use a valid email address"
            },
            submitHandler : function () {
                        $.ajax({
                            type : "POST",
                            url : "sendmail.php",
                            data : $('#form').serialize(),
                            success : function (data) {
                                $('#message').html(data);
                            }
                        });
                    }


        });

In wenigen Worten: Ich würde gerne serverseitig prüfen, mit dem Remote-Methodewenn der Benutzer die Recaptcha-Validierung bestanden hat, BEVOR er das Formular absendet, zusammen mit anderen Validierungsregeln.

Ich kann das Recaptcha überprüfen NACH Übermittlung (auf sendmail.php), aber es wäre schöner, die Recaptcha-Validierungsantwort zusammen mit anderen Feldvalidierungen zu haben.

Der Hauptgrund ist eine bessere Benutzererfahrung, da alle Felder auf einmal überprüft werden.

Ich habe es geschafft, dies zu erreichen, indem ich den Scheck in den submitHandler verschoben habe:

            submitHandler : function () {
                  if (grecaptcha.getResponse() == ''){
                      // if error I post a message in a div
                      $( '#reCaptchaError' ).html( '<p>Please verify youare human</p>' );

                  } else {

                        $.ajax({
                            type : "POST",
                            url : "sendmail.php",
                            data : $('#form').serialize(),
                            success : function (data) {
                                $('#message').html(data);
                            }
                        });
                    }

             }

Aber ich mag diesen Ansatz nicht, aus 2 Gründen:

  1. Es wird nur überprüft, ob das Recaptcha ausgefüllt wurde, nicht, ob es gültig ist, und
  2. Der Benutzer hat das Gefühl, dass es sich um eine Bestätigung in zwei Schritten handelt.

In dieser Antwort heißt es, dass das Recaptcha bei einem Rückruf gerendert werden kann, um einen Funktionsaufruf bei einer erfolgreichen CAPTCHA-Antwort anzugeben.

Ich habe versucht, das zu implementieren, aber ich konnte diese Lösung nicht innerhalb einer Regel der Funktion validate () verwenden.

  • Ist es sicher, die Recaptcha-Antwort von der Clientseite zu überprüfen? Wie schließt du secret_key ein? Was ist der Vorteil gegenüber der serverseitigen Überprüfung?

    – Benutzer557657

    13. Juli 2016 um 2:08 Uhr

Benutzer-Avatar
FabioG

Ich weiß, diese Frage ist etwas veraltet, aber ich hatte das gleiche Problem und habe gerade die Lösung gefunden. Sie können dies tun, indem Sie neben dem reCaptcha-Div ein verstecktes Feld hinzufügen, wie zum Beispiel:

<div class="g-recaptcha" data-sitekey="{YOUR-SITE-KEY-HERE}"></div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">

dann in deinem Javascript:

$("#form").validate({
        ignore: ".ignore",
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            hiddenRecaptcha: {
                required: function () {
                    if (grecaptcha.getResponse() == '') {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },(...rest of your code)

BEACHTEN SIE, DASS SIE HABEN MÜSSEN das ignore: ".ignore" in Ihrem Code, da jquery.validate standardmäßig ausgeblendete Felder ignoriert und sie nicht validiert.

Wenn Sie die Fehlermeldung auf reCapcha entfernen möchten, validieren Sie einen Daten-Callback zum reCapcha-Element

<div class="g-recaptcha" data-sitekey="{YOUR-SITE-KEY-HERE}" data-callback="recaptchaCallback"></div>

Und dann in Ihrer js-Datei hinzufügen

function recaptchaCallback() {
  $('#hiddenRecaptcha').valid();
};

  • Großartig ! ist sehr einfach und funktioniert perfekt, danke.

    – Bruno Ribeiro

    27. März 2016 um 3:16 Uhr

  • Nur um hinzuzufügen, stellen Sie sicher, dass Sie Ihr recaptchaCallback() nicht innerhalb von document ready platzieren. Es ist für das Datenrückrufereignis nicht erreichbar.

    – Petar-Kresimir

    4. November 2016 um 21:19 Uhr

  • sollte die Funktion der erforderlichen Regel wahr zurückgeben, wenn sie ungültig ist?? ist das in Ordnung?

    – Phoenix_uy

    8. März 2017 um 14:20 Uhr

  • @Phoenix_uy Entschuldigung für die Verzögerung bei der Beantwortung. Ja, das ist richtig, wenn die Captcha-Antwort ungültig ist, müssen Sie angeben, dass das versteckte Feld erforderlich ist, um den Fehler anzuzeigen

    – FabioG

    13. März 2017 um 17:52 Uhr

  • Wie sieht der Benutzer eine Validierungsfehlermeldung? Ich bekomme die Validierungsfunktion ausgeführt, aber an der Benutzeroberfläche ändert sich nichts

    – Jeff

    22. Juni 2017 um 21:08 Uhr

Sie können das Absenden des Formulars auch im verhindern SubmitHandler

$("#loginForm").validate({
rules: {
    username: {
        required: true,
        minlength: 6
    },
    password: {
        required: true,
    },
},
submitHandler: function(form) {
    if (grecaptcha.getResponse()) {
        form.submit();
    } else {
        alert('Please confirm captcha to proceed')
    }
}
});

  • Hallo Ranjith, ich verwende den gleichen Code, aber für form.submit(); Ich verwende Ajax-Code. Wie kann ich das verwenden?

    – Naren Verma

    17. März 2020 um 14:17 Uhr

  • @NarenVerma anstelle von form.submit(); Geben Sie Ihren Ajax-Code ein

    – Ranjith Singhu Ganapathy

    25. August 2021 um 7:23 Uhr

Benutzer-Avatar
steviss

Ich fand Ihre Lösung interessant (@FabioG).

Aber ich habe es für die Verwendung ein wenig selbst modifiziert und bin bereit, den Code für andere zur Verwendung freizugeben.

Ich habe an einem interaktiven Formular gearbeitet, das beim Ausführen der Schritte validiert wird.

Es wurde für die Bestellung von Essen verwendet. Ergo erforderte das Formular eine Überprüfung und Aktivierung des Registrierungs-Buttons und es verwendet das neueste reCaptcha bis dato (12.05.2016).

Außerdem verarbeitet dieser Code abgelaufenes reCaptcha, serverseitige Überprüfung über Ajax (obwohl nicht enthalten – wenn jemand es braucht, kann er meine Antwort kommentieren und ich werde es entsprechend bearbeiten).

Lass uns anfangen.

Der HTML-Code:

<form id="registerForm" method="get" action="">
<fieldset class="step-1">
<h4>Step One:</h4>
<span class="clock">Register under one minute!</span>
<label for="email-register" class="label">E-mail*</label>
<input id="email-register" name="email-register" type="email" value="" autocomplete="off"/>

<label for="password-register" class="label">Password*</label>
<input id="password-register" name="password-register" type="password" value="" autocomplete="off"/>

<div class="g-recaptcha" data-sitekey="6LeS4O8SAAAAALWqAVWnlcB6TDeIjDDAqoWuoyo9" data-callback="recaptchaCallback" data-expired-callback="recaptchaExpired" style="margin-top: 3rem;"></div>
<input id="hidden-grecaptcha" name="hidden-grecaptcha" type="text" style="opacity: 0; position: absolute; top: 0; left: 0; height: 1px; width: 1px;"/>
</div>
</fieldset>
<fieldset class="step-2">
<h4>Step two:</h4>
<span class="notice">All fields with a sign are required!*</span>
<label for="first-name" class="label">First Name*</label>
<input name="first-name" id="first-name" type="text" value="" />

<label for="last-name" class="label">Last Name*</label>
<input name="last-name" id="last-name" type="text" value="" />

<label for="address" class="label">Address*</label> 
<input name="address" id="address" type="text" value=""/>

<label for="entrance" class="label">Entrance</label>    
<input name="entrance" id="entrance" type="text" value=""/>

<label for="apartment-number" class="label">Apartment #</label>
<input name="apartment-number" id="apartment-number" type="text" value="" />

<label for="inter-phone" class="label">Interphone</label>           
<input name="inter-phone" id="inter-phone" type="text" value=""/>

<label for="telephone" class="label">Mobile Number*</label>
<input name="telephone" id="telephone" type="text" value="" />

<label for="special-instructions" class="label">Special Instructions</label>    
<textarea name="special-instructions" id="special-instructions"></textarea>
<div>
</fieldset>
<button class="button-register" disabled>Register</button>
</form>

Wie Sie sehen können, ist zunächst die Schaltfläche zum Absenden (“.button-registrieren”) deaktiviert.

Sie können es nur aktivieren, indem Sie das ausfüllen obligatorisch

Felder.

Bitte beachten Sie, dass ich kein CSS eingefügt habe. Das Formular ist auf ein absolutes Minimum beschränkt und dient nur zu Bildungszwecken.

Ein paar Dinge, die sich von @FabioG unterscheiden, die Antwort ist:

Es besteht keine Notwendigkeit, das Element auszublenden oder „.ignore“ zu verwenden. Ich habe es mit Inline-CSS versteckt. Da ist ein Antwort Rückruf

für erfolgreiches reCaptcha und abgelaufenes reCaptcha. Wenn also Ihr reCaptcha beim Ausfüllen des Formulars abläuft, wird es es schaffen ungültig und die Schaltfläche wird sein deaktiviert

wieder. Außerdem verwendet das Formular ein Eingabefeld (das versteckte Eingabefeld), um die Informationen an AJAX (später PHP) weiterzugeben und serverseitig zu überprüfen

(Es ist ein potenzielles Sicherheitsrisiko, ich habe es am Ende des Textes näher behandelt).

Kommen wir zu JavaScript/jQuery.

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
function recaptchaCallback() {
    var response = grecaptcha.getResponse(),
        $button = jQuery(".button-register");
    jQuery("#hidden-grecaptcha").val(response);
    console.log(jQuery("#registerForm").valid());
    if (jQuery("#registerForm").valid()) {
        $button.attr("disabled", false);
    }
    else {
        $button.attr("disabled", "disabled");
    }
}

function recaptchaExpired() {
    var $button = jQuery(".button-register");
    jQuery("#hidden-grecaptcha").val("");
    var $button = jQuery(".button-register");
    if (jQuery("#registerForm").valid()) {
        $button.attr("disabled", false);
    }
    else {
        $button.attr("disabled", "disabled");
    }
}
function submitRegister() {
  //ajax stuff
}
(function ($, root, undefined) {
    $(function () {
        'use strict';
        jQuery("#registerForm").find("input").on("keyup", debounce(function() {
          var $button = jQuery(".button-register");
          if (jQuery("#registerForm").valid()) {
            $button.attr("disabled", false);
          }
          else {
            $button.attr("disabled", "disabled");
          }
        }, 1000));
        jQuery("#registerForm").validate({
          rules: {
            "email-register": {
              required: true,
              email: true
            },
            "password-register": {
              required: true,
              minlength: "6"
            },
            "first-name": "required",
            "last-name": "required",
            address: "required",
            telephone: "required",
            "hidden-grecaptcha": {
              required: true,
              minlength: "255"
            }
          },
          messages: {
            "email-register": "Enter valid e-mail address",
            "password-register": {
              required: "Enter valid password",
              minlength: "Password must be bigger then 6 chars!"
            },
            "first-name": "Required!",
            "last-name": "Required!",
            address: "Required!",
            telephone: "Required!"
          },
          submitHandler: submitRegister
        });
    }); 
})(jQuery, this);

JavaScript/jQuery: Wie Sie hier sehen können, gibt es einige Funktionen: recaptchaCallback() undrecaptchaExpired()

. recaptchaCallback() die über das data-Attribut eingebettet istDaten-Callback nutzt die grecaptcha.getResponse() um zu sehen, ob das reCaptcha validiert ist, wenn ja, gibt es den Token in das versteckte Eingabefeld ein und bittet um eine erneute Validierung über diejQuery(“#registerForm).validate();

. Wenn das reCaptcha jedoch in der Zwischenzeit abläuft, verwendet es die zugewiesene Funktion im “data-expired-callback”, um das Token aus dem Eingabefeld zu entfernen und erneut um eine erneute Validierung zu bitten, die fehlschlägt, da das Feld leer ist. Dies wird mit der Funktion erreichtrecaptchaExpired()

. Später im Code können Sie sehen, dass wir eine jQuery hinzugefügt haben Taste auf Funktion, um die erneute Validierung zu prüfen und zu sehen, ob der Benutzer die erforderlichen Informationen an die Eingabefelder weitergegeben hat. Wenn die Informationen und das Feld erfolgreich validiert werden Taste auf Funktion aktiviert die Registrieren

Taste. Außerdem habe ich ein Debounce-Skript (tnx, David Walsh) verwendetTaste auf

. Es verursacht also keine Browserverzögerung. Da wäre viel Tipparbeit angesagt.

Aber denken Sie daran, wenn ein Benutzer beschließt, das reCaptcha zu umgehen, kann er immer nur die “255” Zeichen lange Zeichenfolge in das Eingabefeld eingeben. Aber ich bin noch einen Schritt weiter gegangen und habe serverseitig eine AJAX-Verifizierung durchgeführt, um das reCaptcha zu bestätigen. Ich habe es jedoch nicht in die Antwort aufgenommen.

Ich denke, dieser Code ist eine geringfügige Verbesserung gegenüber der vorherigen Antwort. Wenn Sie Fragen haben oder den AJAX/PHP-Code benötigen, können Sie dies gerne kommentieren. Ich werde es liefern, wenn ich kann. Hier ist auch der Codepen:

reCaptcha mit jQuery.validation Alle Informationen zu den reCatpcha-Datenattributen und Funktionen in ihrer API finden Sie hier:

reCaptcha-API

Hoffe es hat jemandem geholfen!

  • Grüße, .on("keyup" Das funktioniert, ist aber für den Benutzer etwas umständlich, da Ihr

    call fordert Sie mit Validierungsfehlern auf, bevor Sie das Ausfüllen des Formulars abschließen können. Es wäre viel schöner, wenn die Eingabeaufforderungen erst erscheinen würden, nachdem Sie auf Registrieren geklickt haben und das Formular ungültig ist.

    – MeSo2

17. Mai um 16:58 Uhr

<form onsubmit="return $(this).valid() && grecaptcha.getResponse() != ''">

Ich habe heute mit diesem gekämpft und bin am Ende zu folgendem gekommen:

1283130cookie-checkNeues reCaptcha mit jQuery Validation Plugin

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

Privacy policy