我在与 reCAPTCHA 集成的网站上有多种表格。两种类型的用户的两种注册表格和一种联系方式。
像这样在标头中添加reCAPTCHA API。
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
在页脚中,我添加了reCAPTCHA渲染功能。
<script type="text/javascript">
var verifyCallback = function(response) {
//alert(response);
};
var widgetId1;
var widgetId2;
var onloadCallback = function() {
// Renders the HTML element with id 'example1' as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to 'widgetId1'.
widgetId1 = grecaptcha.render('hiddenRecaptcha1', {
'sitekey' : 'sitekey',
'theme' : 'light',
'callback' : verifyCallback,
});
widgetId2 = grecaptcha.render(document.getElementById('hiddenRecaptcha2'), {
'sitekey' : 'sitekey',
'callback' : verifyCallback
});
grecaptcha.render('hiddenRecaptcha', {
'sitekey' : 'sitekey',
'callback' : verifyCallback,
'theme' : 'dark'
});
};
</script>
我正在使用jquery验证所有reCAPTCHA。
联系表格验证
$("#contactus").validate({
ignore: ":hidden:not(.my_cpa)",
rules: {
"hiddenRecaptcha": {
required: function() {
if (grecaptcha.getResponse() == '') {
return true;
} else {
return false;
}
}
}
},
messages: {
"hiddenRecaptcha": "Please Prove That You Are Not Robot"
},
highlight: function(element, errorClass) {
$(element).addClass('has-error');
},
unhighlight: function(element) {
$(element).removeClass('has-error');
},
submitHandler: function(form) {
form.submit();
}
});
联系方式中的验证码
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div id="hiddenRecaptcha"></div>
<input type="hidden" class="my_cpa hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
</div>
首次注册表格中的验证码及其验证
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div id="hiddenRecaptcha1"></div>
<input type="hidden" class="my_cpa1 hiddenRecaptcha1 required" name="hiddenRecaptcha1" id="hiddenRecaptcha1">
</div>
function residentForm(){
var settings = $('#registration_form').validate().settings;
$.extend(settings, {
ignore: ":hidden:not(.my_cpa1)",
rules: {
"hiddenRecaptcha1": {
required: function() {
if (grecaptcha.getResponse() == '') {
return true;
} else {
return false;
}
}
}
},
messages: {
"hiddenRecaptcha1": "Please Prove That You Are Not Robot"
}
});
}
第二份注册表格中的验证码及其验证
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div id="hiddenRecaptcha2"></div>
<input type="hidden" class="my_cpa2 hiddenRecaptcha2 required" name="hiddenRecaptcha2" id="hiddenRecaptcha2">
</div>
function businessForm(){
var settings = $('#bregistration_form').validate().settings;
$.extend(settings, {
ignore: ":hidden:not(.my_cpa2)",
rules: {
"hiddenRecaptcha2": {
required: function() {
if (grecaptcha.getResponse() == '') {
return true;
} else {
return false;
}
}
}
},
messages: {
"hiddenRecaptcha2": "Please Prove That You Are Not Robot"
}
});
}
问题:
仅首次注册表单已使用jquery验证并成功提交,而在其他表单上,该表单仍显示消息请证明您不是机器人,并且表单未提交。
当我在联系页面以外的任何页面 上时,它在控制台中显示以下消息。
reCAPTCHA占位符元素必须是元素或ID
我已经检查了所有这些答案,ReCAPTCHA placeholder element must be an element or id,Uncaught Error: ReCAPTCHA placeholder element must be an element or id和ReCaptcha: “The bind parameter must be an element or id”。但无法验证我的表单,也无法删除错误。
有人可以告诉我我在哪里做错了吗?