我现在在同一页面上有两个表单,我是验证表单,当时Google验证码响应是在那时出现的,一个是在验证另一个不是验证响应,显示为空白 下面的脚本呈现验证码
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
<script type="text/javascript">
var verifyCallback1 = function(response) {
if(response.length == 0) {
document.getElementById('g-recaptcha-error1').innerHTML = '<span
style="color:red;">Captcha field is required.</span>';
return false;
}else{
return true;
}
}
var verifyCallback2 = function(data) {
if(data) {
return true;
}else{
return false;
$('#g-recaptcha-error2').html('<span style="color:red;">Captcha field is required.</span>');
}
}
var widgetId1;
var widgetId2;
var onloadCallback = function() {
widgetId1 = grecaptcha.render('example1', {
'sitekey' : '6LdVdc8ZAAAAAFEsEAkoiwB984HVGRlpNOGdwU8C',
'callback' : verifyCallback1,
'theme' : 'light'
});
widgetId2 = grecaptcha.render(document.getElementById('example2'), {
'sitekey' : '6LdVdc8ZAAAAAFEsEAkoiwB984HVGRlpNOGdwU8C',
'callback' : verifyCallback2,
});
};
</script>
## form1 对于这种形式,谷歌recaptcha在onsubmit功能上也可以正常工作 但是对于第二个功能,onsubmit验证没有发生,这意味着响应显示为空白
<form action="" method="post" id="contact-form" onsubmit="return submitUserForm1();">
<div id="example1"></div>
<div id="g-recaptcha-error1"></div>
<button type="submit" class="button1 btn-sm" name="Submit" >Submit</button>
<script src='https://www.google.com/recaptcha/api.js'></script>
</form>
## form2
在我提交第二份表单答复时,这里为空白
<form class="contact_form1" id="contact_form2" action="" method="post" onsubmit="return submitUserForm2();">
<div class="FormBgColor">
<div align="center"><span style="color:#F00; font-size:14px;"> <?php echo $flag; ?><?php echo $errors; ?></span></div>
<div class="FormGroup">
<div id="example2"></div>
<div id="g-recaptcha-error2"></div>
</div>
<div class="button">
<input type="submit" class="SubmitBtn" value="Register" name="Submit" />
</div>
</div>
</form>
##formValidation on submit
<script>
function submitUserForm1() {
var response = grecaptcha.getResponse();
alert(response)
if(response.length == 0) {
document.getElementById('g-recaptcha-error1').innerHTML = '<span style="color:red;">Captcha field is required.</span>';
return false;
}
}
function submitUserFor2() {
var response = grecaptcha.getResponse();
alert(response)
if(response.length == 0) {
document.getElementById('g-recaptcha-error2').innerHTML = '<span style="color:red;">Captcha field is required.</span>';
return false;
}
}
</script>