如何使用jQuery Validate插件测试Recaptcha [英] how to test Recaptcha with jQuery Validate plugin
问题描述
我正在使用验证jquery插件和Recaptcha用于联系表单，我想知道如何在提交表单之前，如果不发送错误消息，则在提交验证表单之前检查验证码中的代码是否正确，因为现在可以验证所有内容，但是我插入了错误的代码，但无论如何都提交了表单.这是我提前获得任何帮助的代码
<script type="text/javascript">
var RecaptchaOptions = {
lang : 'en',
theme : 'custom',
custom_theme_widget: 'recaptcha_widget'
};
</script>
<form id="contact" method="post" action="#">
<fieldset>
<label for="name_contact">NAME</label>
<input type="text" class="input-xlarge" id="name_contact" name="name_contact" value="" placeholder="" minlength="2">
<label for="email_contact">EMAIL</label>
<input type="email" class="input-xlarge" id="email_contact" name="email_contact" value="" placeholder="">
<label for="telephone">CONTACT NUMBER</label>
<input type="tel" class="input-xlarge" id="telephone" name="telephone" placeholder="" value="" >
<label for="message">MESSAGE</label>
<textarea id="message" class="input-xlarge" name="message" placeholder="" rows="5"></textarea>
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
<span class="recaptcha_only_if_image">Enter the words above:</span>
<span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
<div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
<div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
<div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>
<div><a href="javascript:Recaptcha.showhelp()">Help</a></div>
</div>
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=6Lf8RN4SAAAAAKnllVnDw23UpBIuAIdTRFgN1kmX">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6Lf8RN4SAAAAAKnllVnDw23UpBIuAIdTRFgN1kmX" height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
<button type="submit" value="" id="" name="send" class="pull-right lightblue btn-primary">SUBMIT</button>
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function () {
$("#contact").validate({
rules: {
"name_contact": {
required: true,
minlength: 3
},
"email_contact":{
required: true
},
"message":{
required:true
},
"recaptcha_response_field":{
required:true
}
},
messages: {
"name_contact": {
required: "Please, enter a name"
},
"email_contact":{
required: "Enter a valid email"
},
"message":{
required: "Please provide a comment"
},
"recaptcha_response_field":{
required: "Captcha is required"
}
},
errorPlacement: function(error, element) {
error.insertBefore(element);
}
});
});
</script>
没有简单的解决方案，仅使用JavaScript或jQuery.由于您必须使用API和私有密钥来比较Re-Captcha代码，因此，为了获得适当的安全性，您必须使用某些服务器进行此过程
-
除了Re-Captcha代码外，用户正确填写了表格.
-
如果重新验证码为空，则jQuery Validate中的常规
required规则将触发缺少验证码"消息.用户可以重试. -
输入(正确或不正确)的Re-Captcha代码，表单通过
submitHandler回调函数中的jQueryajax提交到您的服务器端代码. -
您的服务器端代码，PHP，Perl，等等，然后使用您的私有API密钥对照API预期的Re-Captcha代码来验证输入的Re-Captcha代码.
-
如果Re-Captcha代码正确，那么您的服务器端代码将继续正常运行，并向jQuery
ajaxsuccess回调函数返回成功"文本响应. /p> -
如果重新验证码是不正确，则您的服务器端代码将<仅>返回您的jQuery
ajaxsuccess回调函数，服务器端代码将无济于事. -
在jQuery
ajaxsuccess回调函数中，读取从服务器端代码返回的消息文本. -
如果返回的消息表明成功，则表明您的表单已经成功提交，您可以重定向，清除表单，制作动画，打印消息，不执行任何操作等.
-
如果返回的消息指示失败，请通过JavaScript生成新的Re-Captcha代码，显示错误消息，输入的验证码不正确" ，用户可以简单地重试. /p>
这就是我的工作方式……您将需要做以下非常类似的事情.
在.validate()选项中添加submitHandler，然后使用ajax控制表单提交.这是您与验证码交互并控制表单提交的唯一方法.
您还需要修改服务器端功能以测试验证码通过还是失败，执行适当的功能，并返回正确的ajax消息msg.如果不了解服务器端代码，就无法说出更具体的内容.
(注意:，任何不使用服务器端代码而仅使用JavaScript/jQuery的解决方案，都不是安全的.可以轻松绕过验证码，并且可以使用您的私有API密钥向公众公开.)
$(document).ready(function() {
$("#contact").validate({
// your other options and rules,
submitHandler: function (form) {
$.ajax({
type: 'POST',
data: $('form').serialize(),
url: 'formMail.pl', // <-- whatever your server-side script, mine is a perl form mailer
success: function (msg) {
if (msg.indexOf('captcha') != -1) {
Recaptcha.reload(); // reloads a new code
$('#recaptcha_response_field').before(msg); // error message
} else {
// anything else to do upon success, animations, etc.
// form was already submitted as per ajax
}
}
});
return false; // blocks normal form submit
}
});
});
以下仅是一个PERL示例，说明了我如何修改服务器端代码(即Form Mailer脚本).您必须以某种类似的方式修改服务器端代码.
脚本首次运行时将调用子例程check_captcha.
sub check_captcha {
my $ua = LWP::UserAgent->new();
my $result=$ua->post(
'http://www.google.com/recaptcha/api/verify',
{
privatekey => 'xxxxxxxxxxxxx', # insert your private key here
remoteip => $ENV{'REMOTE_ADDR'},
challenge => $Form{'recaptcha_challenge_field'},
response => $Form{'recaptcha_response_field'}
}
);
if ( $result->is_success && $result->content =~ /^true/) {
return; # OK - continue as normal with Form Mailer
} else {
# error, Form Mailer will not continue
&error('captcha_failed'); # failed Captcha code, call error subroutine to print an error message (msg) containing the word "captcha"
}
}
请记住，此服务器端代码必须返回一条消息，表明您的jQuery在jQuery ajax success回调中如上msg所示.在我的示例中，如果邮件中包含验证码"字样，则表示该密码输入错误，用户必须重新输入新的验证码.
I am using validate jquery plugin and recaptcha for a contact form and i woudld like to know how can i check if the code in the captcha is correct before the form get submitted if not send an error message because right now validate everything but i inserted a wrong code the form get submitted anyway. Here's my code ty in advance for anyhelp
<script type="text/javascript">
var RecaptchaOptions = {
lang : 'en',
theme : 'custom',
custom_theme_widget: 'recaptcha_widget'
};
</script>
<form id="contact" method="post" action="#">
<fieldset>
<label for="name_contact">NAME</label>
<input type="text" class="input-xlarge" id="name_contact" name="name_contact" value="" placeholder="" minlength="2">
<label for="email_contact">EMAIL</label>
<input type="email" class="input-xlarge" id="email_contact" name="email_contact" value="" placeholder="">
<label for="telephone">CONTACT NUMBER</label>
<input type="tel" class="input-xlarge" id="telephone" name="telephone" placeholder="" value="" >
<label for="message">MESSAGE</label>
<textarea id="message" class="input-xlarge" name="message" placeholder="" rows="5"></textarea>
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
<span class="recaptcha_only_if_image">Enter the words above:</span>
<span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
<div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
<div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
<div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>
<div><a href="javascript:Recaptcha.showhelp()">Help</a></div>
</div>
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=6Lf8RN4SAAAAAKnllVnDw23UpBIuAIdTRFgN1kmX">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6Lf8RN4SAAAAAKnllVnDw23UpBIuAIdTRFgN1kmX" height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
<button type="submit" value="" id="" name="send" class="pull-right lightblue btn-primary">SUBMIT</button>
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function () {
$("#contact").validate({
rules: {
"name_contact": {
required: true,
minlength: 3
},
"email_contact":{
required: true
},
"message":{
required:true
},
"recaptcha_response_field":{
required:true
}
},
messages: {
"name_contact": {
required: "Please, enter a name"
},
"email_contact":{
required: "Enter a valid email"
},
"message":{
required: "Please provide a comment"
},
"recaptcha_response_field":{
required: "Captcha is required"
}
},
errorPlacement: function(error, element) {
error.insertBefore(element);
}
});
});
</script>
There is no simple solution only using JavaScript or jQuery. Since you have to compare the Re-Captcha code using the API along with your private key, for proper security, you must do this process with some server-side code.
User fills out form correctly except for Re-Captcha code.
If Re-Captcha code is blank, normal
requiredrule in jQuery Validate triggers a "missing Captcha" message. User can try again.A Re-Captcha code entered (correctly or incorrectly), form is submitted to your server-side code via jQuery
ajaxwithin thesubmitHandlercallback function.Your server-side code, PHP, Perl, whatever, then uses your private API key to verify the entered Re-Captcha code against the Re-Captcha code expected by the API.
If Re-Captcha code is correct, your server-side code continues as normal and returns a "success" text response to your jQuery
ajaxsuccesscallback function.If Re-Captcha code is incorrect, your server-side code will only return an "error" text response to your jQuery
ajaxsuccesscallback function, and the server-side code will do nothing else.Within your jQuery
ajaxsuccesscallback function, read the message text returned from the server-side code.If the returned message indicates a success, then your form was already submitted successfully and you can redirect, clear out the form, do an animation, print a message, do nothing, or whatever, etc.
If the returned message indicates failure, generate a new Re-Captcha code via JavaScript, display an error message, "incorrect Captcha entered", and the user can simply try again.
This is how I did mine... you'll need to do something very much like the following.
Add a submitHandler to your .validate() options and use ajax to control the form submission. It's the only way you can interact with the Captcha and control form submission.
You'll also need to modify your server-side function to test whether the captcha passed or failed, do the appropriate function, and to return the proper ajax message, msg. Without knowing anything about your server-side code, it's impossible to say anything more specific.
(NOTE: any solution that is purely JavaScript/jQuery, without editing your server-side code, is not secure. Captcha can be easily bypassed and your private API key is exposed to the public.)
$(document).ready(function() {
$("#contact").validate({
// your other options and rules,
submitHandler: function (form) {
$.ajax({
type: 'POST',
data: $('form').serialize(),
url: 'formMail.pl', // <-- whatever your server-side script, mine is a perl form mailer
success: function (msg) {
if (msg.indexOf('captcha') != -1) {
Recaptcha.reload(); // reloads a new code
$('#recaptcha_response_field').before(msg); // error message
} else {
// anything else to do upon success, animations, etc.
// form was already submitted as per ajax
}
}
});
return false; // blocks normal form submit
}
});
});
The following is only a PERL example of how I modified my server-side code which was a Form Mailer script. You'll have to adapt your server-side code in some similar fashion.
The subroutine check_captcha is called when the script first runs.
sub check_captcha {
my $ua = LWP::UserAgent->new();
my $result=$ua->post(
'http://www.google.com/recaptcha/api/verify',
{
privatekey => 'xxxxxxxxxxxxx', # insert your private key here
remoteip => $ENV{'REMOTE_ADDR'},
challenge => $Form{'recaptcha_challenge_field'},
response => $Form{'recaptcha_response_field'}
}
);
if ( $result->is_success && $result->content =~ /^true/) {
return; # OK - continue as normal with Form Mailer
} else {
# error, Form Mailer will not continue
&error('captcha_failed'); # failed Captcha code, call error subroutine to print an error message (msg) containing the word "captcha"
}
}
Remember that this server-side code must return a message that your jQuery picks up within your jQuery ajax success callback as msg above. In my example, if the message contains the word "captcha", that means the code was entered wrong and user must re-enter a new Captcha code.
这篇关于如何使用jQuery Validate插件测试Recaptcha的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
