我花了一天时间将google recaptcha合并到我现有的表单中，但我现在面临的挑战是我希望在表单字段的自定义验证脚本中包含recaptcha验证。
验证脚本的工作方式是提交处理程序在验证成功后运行一个函数。成功操作将处理电子邮件脚本。
我想在发送电子邮件脚本之前验证验证码。如何使用我当前的设置执行此操作？我在custom.js中使用ajax来处理这个问题。看一下 submithandler 。我很感激任何帮助。
有3个文件：
表单HTML
<form id="appointment" name="appointment" method="post" action="">
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'clean',
custom_theme_widget: 'recaptcha_widget'
};
</script>
<fieldset>
<div class="span11 fix-margin">
<div class="span5 fix-margin">
<label for="name">Name</label>
<input id="name" name="name" type="text" class="span4 required">
</div>
<div class="span5">
<label for="patient">Are you a current patient?</label>
<div>
<label class="radio inline" for="radios-0">
<input type="radio" name="patient" id="patient-1" value="Yes">Yes
</label>
<label class="radio inline" for="radios-1">
<input type="radio" name="patient" id="patient-0" value="No">No
</label>
</div>
</div>
</div>
<div class="span11 fix-margin">
<div class="span5 fix-margin">
<label for="address">Adress</label>
<input id="address" name="address" type="text" class="span4">
</div>
<div class="span5">
<label for="city">City</label>
<input id="city" name="city" type="text" class="span3">
</div>
</div>
<div class="span11 fix-margin">
<div class="span5 fix-margin">
<label for="state">State</label>
<input id="state" name="state" type="text" class="span3">
</div>
<div class="span5">
<label for="zip">Zip/Postal</label>
<input id="zip" name="zip" type="text" class="span1">
</div>
</div>
<div class="span11 fix-margin">
<div class="span5 fix-margin">
<label for="email">Email</label>
<input id="email" name="email" type="text" class="span3 required">
</div>
<div class="span5">
<label for="phone">Phone</label>
<input id="phone" name="phone" type="text" class="span3 required">
</div>
</div>
<div class="span11 fix-margin checkboxes1">
<!-- Multiple Checkboxes (inline) -->
<div class="control-group span11 fix-margin">
<label class="control-label" for="day">Preferred day(s) of the week for an appointment?</label>
<div class="controls">
<label class="checkbox inline" for="day-0">
<input type="checkbox" name="day[]" id="day-0" value="Any day">Any day
</label>
<label class="checkbox inline" for="day-1">
<input type="checkbox" name="day[]" id="day-1" value="Monday">Monday
</label>
<label class="checkbox inline" for="day-2">
<input type="checkbox" name="day[]" id="day-2" value="Tuesday">Tuesday
</label>
<label class="checkbox inline" for="day-3">
<input type="checkbox" name="day[]" id="day-3" value="Wednesday">Wednesday
</label>
<label class="checkbox inline" for="day-4">
<input type="checkbox" name="day[]" id="day-4" value="Thursday">Thursday
</label>
<label class="checkbox inline" for="day-5">
<input type="checkbox" name="day[]" id="day-5" value="Friday">Friday
</label>
<label class="checkbox inline" for="day-6">
<input type="checkbox" name="day[]" id="day-6" value="Saturday">Saturday
</label>
</div>
</div>
</div>
<div class="span11 fix-margin checkboxes2">
<!-- Multiple Checkboxes (inline) -->
<div class="control-group span11 fix-margin">
<label class="control-label" for="time">Preferred time(s) for an appointment?</label>
<div class="controls">
<label class="checkbox inline" for="time-0">
<input type="checkbox" name="time[]" id="time-0" value="Any time">Any Time
</label>
<label class="checkbox inline" for="time-1">
<input type="checkbox" name="time[]" id="time-1" value="Morning">Morning
</label>
<label class="checkbox inline" for="time-2">
<input type="checkbox" name="time[]" id="time-2" value="Noon">Noon
</label>
<label class="checkbox inline" for="time-3">
<input type="checkbox" name="time[]" id="time-3" value="Afternoon">Afternoon
</label>
<label class="checkbox inline" for="time-4">
<input type="checkbox" name="time[]" id="time-4" value="Evening">Evening
</label>
</div>
</div>
</div>
<div class="span11 fix-margin">
<!-- Textarea -->
<label for="description">Please describe the nature of your appointment (e.g., consultation, check-up, etc.):</label>
<textarea id="description" name="description" class="span7" rows="5"></textarea>
</div>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=public_key_here"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=public_key_here" 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>
<br>
<div class="span11 fix-margin">
<p>Please Note: Messages sent using this form are not considered private.</p>
<p>Please contact Forum Veterinary Clinic by telephone if sending highly confidential or private information.</p>
</div>
<div id="okmessage" class="span4 fix-margin">
<p>Your message has been sent. Thank you!</p>
</div>
<button class="btn btn-theme btn-large" type="submit" id="submit-appoinment">Send Request</button>
</fieldset>
</form>
Custom.js
$.validator.addMethod("verify", function(value, element, params) {
return this.optional(element) || value == params[0] + params[1];
}, jQuery.validator.format("Please enter the correct value for 3 + 1"));
$("#appointment").validate({
rules: {
name: {
minlength:3,
},
verify:{
verify:[3, 1]
},
email:{
email: true
},
phone:{
phoneUS: true
},
day: {
required: true,
minlength: 1
},
time: {
required: true,
minlength: 1
},
recaptcha_response_field:{
minlength:3
}
},
messages: {
day: "Please select at least one day.",
time: "Please select the prefered time for the appointment.",
email: "Please enter a correct email address."
},
errorPlacement: function(error, element) {
error.insertAfter(element);
if ($(".checkboxes1").has(element).size() > 0) {
error.insertAfter($(".checkboxes1"));
}
if ($(".checkboxes2").has(element).size() > 0) {
error.insertAfter($(".checkboxes2"));
}
},
submitHandler: function(form) {
event.preventDefault();
var Challenge = Recaptcha.get_challenge(); // get the challenge
var Response = Recaptcha.get_response(); // get the user response
$.ajax({
type: 'POST',
data: $(form).serialize(),
url: "/lib/send_email.php",
success: function() {
form.reset();
$('#submit-appoinment').hide();
$('#okmessage').show().fadeOut(7000, function(){
$('#submit-appoinment').show();
});
}
});
//form.submit();
return false;
}
});
Verify.php
require_once('recaptchalib.php');
$privatekey = "private_key_here";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
// What happens when the CAPTCHA was entered incorrectly
die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
"(reCAPTCHA said: " . $resp->error . ")");
} else {
// What happens when the CAPTCHA was entered correctly
}