よく検索しましたが、フォーム送信前に jQuery検証プラグイン の検証機能と一緒に 新しいreCaptchaを検証する の方法がわかりません。
私はこのようなことを意味します:
$.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);
}
});
}
});
簡単に言えば、ユーザーがフォームを送信する前に、他の検証規則とともにrecaptcha検証に合格した場合、 remote method でサーバーサイドをチェックしたいと思います。
(sendmail.phpで)提出後にrecaptchaを確認することはできますが、recaptcha検証応答と他のフィールド検証を行う方が良いでしょう。
主な理由は、すべてのフィールドを一度にチェックして、ユーザーエクスペリエンスを向上させるためです。
SubmitHandler内でチェックを移動する何かを達成することができました。
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);
}
});
}
}
しかし、私は2つの理由で好きではありません:1)recaptchaが有効であるかどうかではなく、埋められているかどうかをチェックするだけです。 2)ユーザーは2段階認証のように感じます。
この答えでは CAPTCHA応答の成功時に関数呼び出しを指定するために、コールバックでRecaptchaのレンダリングを完了できると彼らは言います。
私はそれを実装しようとしましたが、validate()関数のルール内でこのソリューションを使用することはできませんでした。
どんなヒントでも大歓迎です!
私はこの質問が少し時代遅れであることを知っていますが、私は同じ問題を抱えていて、解決策を見つけました。これを行うには、reCaptcha divの横に次のような非表示フィールドを追加します。
<div class="g-recaptcha" data-sitekey="{YOUR-SITE-KEY-HERE}"></div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
あなたの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)
あなたが持たなければならないことに注意ignore: ".ignore"
は、jquery.validateが非表示フィールドをデフォルトで無視し、検証しないためです。
ReCapcha validateでエラーメッセージを削除する場合は、reCapcha要素にデータコールバックを追加します。
<div class="g-recaptcha" data-sitekey="{YOUR-SITE-KEY-HERE}" data-callback="recaptchaCallback"></div>
そして、あなたのjsファイルに追加します
function recaptchaCallback() {
$('#hiddenRecaptcha').valid();
};
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')
}
}
});
あなたのソリューションが面白いことがわかりました(@FabioG)。
しかし、私は自分で少し使用するためにそれを変更しました。他の人が使用するためにコードを共有したいと思っています。
私はインタラクティブなフォームで作業していました。これは、手順を完了すると検証されます。
食べ物を注文するために使われました。エルゴ、登録ボタンの検証とアクティベーションが必要なフォームであり、最新のreCaptcha(5/12/2016)を使用しています。
また、このコードは、期限切れのreCaptcha、ajaxを介したサーバー側の検証を処理します(含まれていません-必要に応じて回答を自由にコメントしてください。必要に応じて編集します)。
始めましょう。
HTMLコード:
<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>
ご覧のとおり、送信用のボタン( ".button-register")は最初はdisabledです。
mandatory(*)フィールドに入力することでのみ有効にできます。
CSSは含めなかったことに注意してください。フォームは最低限必要なものであり、教育目的のためだけのものです。
@ FabioGと異なるものはほとんどありません、答えは次のとおりです:
要素を非表示にする必要も、「。ignore」を使用する必要もありません。インラインCSSで非表示にしました。
ReCaptchaが成功し、reCaptchaが期限切れになった場合、応答コールバックがあります。
したがって、フォームへの入力中にreCaptchaの有効期限が切れると、invalidになり、ボタンは再びdisabledになります。
同様に、フォームは入力フィールド(非表示の入力フィールド)を使用して情報をAJAX(PHPに送信)に渡し、サーバー側で検証します(潜在的なセキュリティリスクであるため、最後に詳しく説明しました。テキストの)。
JavaScript/jQueryに移りましょう。
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);
ここでわかるように、いくつかの関数があります:recaptchaCallback()およびrecaptchaExpired()。
recaptchaCallback()データ属性を介して埋め込まれるdata-callback、grecaptcha.getResponse()reCaptchaが検証されているかどうかを確認します。検証されている場合は、トークンを非表示の入力フィールドに入力し、jQuery( "#registerForm).validate();を介して再検証を要求します。
ただし、reCaptchaが期限切れになった場合、「data-expired-callback」で割り当てられた関数を使用して、入力フィールドからトークンを削除し、フィールドが空であるため失敗する再検証を再度要求します。これは、関数recaptchaExpired()で実現されます。
コードの後半で、jQuery keyup関数を追加して、再検証を確認し、ユーザーが入力フィールドに必要な情報を渡したかどうかを確認できます。情報とフィールドが正常に検証されると、keyup関数はRegisterボタンを有効にします。
また、keyupでデバウンススクリプト(tnx、David Walsh)を使用しました。したがって、ブラウザの遅延は発生しません。なぜなら、多くの入力があるからです。
ただし、ユーザーがreCaptchaを回避することを決めた場合、入力フィールドに常に「255」文字の文字列を入力できることに注意してください。しかし、さらに一歩踏み込んで、reCaptchaを確認するためにAJAX検証サーバー側を作成しました。
このコードは、以前の回答に対するわずかな改善だと考えています。質問がある場合やAJAX/PHPコードが必要な場合は、お気軽にコメントしてください。できるときに供給します。
Codepenもここにあります: jQuery.validationを使用したreCaptcha
ReCatpchaのデータ属性と関数に関するすべての情報は、APIで見つけることができます: reCaptcha API
それが誰かを助けたことを願っています!
よろしく、
私は今日これに苦労し、最終的には行きました:
<form onsubmit="return $(this).valid() && grecaptcha.getResponse() != ''">
これは最も簡単な方法のように感じます。誰かがそのようにjsをインライン化することに文句を言うはずですが、私は大丈夫です。