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:
- Es wird nur überprüft, ob das Recaptcha ausgefüllt wurde, nicht, ob es gültig ist, und
- 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.
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();
};
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')
}
}
});
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!
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