我集成了新的隐藏式reCAPTCHA (v2)框架,该框架默认使用提交按钮的点击
事件来验证用户。但是,这个事件会在内置的HTML表单验证之前触发。我正在寻找一种使其按照预期顺序进行的方法:先进行表单验证,然后再进行reCAPTCHA验证。
我集成了新的隐藏式reCAPTCHA (v2)框架,该框架默认使用提交按钮的点击
事件来验证用户。但是,这个事件会在内置的HTML表单验证之前触发。我正在寻找一种使其按照预期顺序进行的方法:先进行表单验证,然后再进行reCAPTCHA验证。
由于新的v2 grecaptcha
方法,您必须以编程方式完成它:grecaptcha.execute()
,以便reCAPTCHA不会替换按钮的默认单击事件,这会阻止默认的HTML5表单验证。
事件路径如下:
grecaptcha.execute()
$('#form-contact').submit(function (event) {
event.preventDefault();
grecaptcha.reset();
grecaptcha.execute();
});
function formSubmit(response) {
// submit the form which now includes a g-recaptcha-response input
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
<form action="?">
<div class="g-recaptcha"
data-sitekey="your-key"
data-size="invisible"
data-callback="formSubmit">
</div>
<button type="submit">Submit</button>
</form>
Hi got a working solution here. Working with invisible Recaptcha.
jQuery(document).ready(function() {
var commentform = jQuery("#commentform");
commentform.on("click", "#submit-comment", function(e) {
if(commentform[0].checkValidity()) {
e.preventDefault();
grecaptcha.execute();
}
});
});
function submitCommentForm(data) {
document.getElementById("commentform").submit();
}
<form action="blaba.php" method="post" id="commentform" class="comment-form">
<div class="form-submit">
<div data-callback="submitCommentForm" data-sitekey="yourkey" class="g-recaptcha" data-size="invisible">
<button id="submit-comment">Leave a comment</button>
</div>
</form>
<form id="my-form">
<!-- Your form fields ... -->
<div class="g-recaptcha"
data-sitekey="..."
data-callback="submitMyForm"
data-size="invisible">
</div>
<button type="submit">Submit</button>
</form>
JS:
var myForm = $('my-form');
function submitMyForm () {
myForm.trigger('submit', [true]);
}
$(function () {
myForm.on('submit', function (e, skipRecaptcha) {
if(skipRecaptcha) {
return;
}
e.preventDefault();
grecaptcha.execute();
});
})
添加所需的任意数量的表单,只需更改两个位置中的“UNIQUE_FORM_ID”,并更新表单的“POST_URL”。 确保在“RECAPTCHA_SITE_KEY”的位置使用您自己的密钥。
<form id="UNIQUE_FORM_ID" method="post" action="POST_URL">
<!-- ** Notice ** this hidden input field that will later send our g-recaptcha token back to our server -->
<input type="hidden" name="g-recaptcha-response" value="">
<!-- Add other hidden nonce fields -->
<!-- Required field -->
<input name="fullname" type="text" placeholder="Full Name" required>
<!-- Submit button -->
<!-- ** Notice ** the 'form' attribute; using SAME value as it's parent's form id, above. -->
<!-- ** Notice ** the 'onclick' attribute; be sure to pass event -->
<button type="submit" form="UNIQUE_FORM_ID" onclick="formSubmitBtn(event)">Send</button>
</form>
<!-- Only add scripts once -->
<!-- ** Notice ** to manually call grecaptcha, our site key must be included when loading api.js using the 'render' query param -->
<script src="https://www.google.com/recaptcha/api.js?render=RECAPTCHA_SITE_KEY"></script>
<script>
/**
* Handles form submissions for Google recaptcha v3.
* Allows for HTML5 form validation to complete before processing.
*/
function formSubmitBtn($event) {
/**
* Checks the validity of the form.
* Return if invalid; HTML5 validation errors should display.
*/
if (!$event.target.form.checkValidity()) {
return;
}
/**
* Form is client-side valid; taking over the remainder of processing.
*/
$event.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute("RECAPTCHA_SITE_KEY", { action: 'submit' }).then(function(token) {
/**
* Adds the token g-recaptcha-response token to our hidden form element.
* ** Notice ** we our referencing the specific form's input element by name here (do not use IDs).
*/
$event.target.form.elements['g-recaptcha-response'].value = token;
/**
* Use the form API directly to submit the form.
*/
$event.target.form.submit();
});
});
}
</script>
addEventListener
的原因是什么?例如:document.addEventListener('DOMContentLoaded', function () { document.getElementById('html-submitt') .addEventListener('submit', formSubmitBtn); });
- Motivated$event
周围。它仍然按预期传递吗?token是从execute
方法创建的吗?它是否将token值附加到正确的表单上?如果您制作一个CodePen或类似的东西,我可以帮助调试。 - PigBoT作为默认方法似乎会覆盖HTML5表单验证,我遇到了这个问题。我还希望所有代码都是通用的,而不是硬编码任何函数/元素名称。最后,我使用v3 api想出了以下代码 -
HTML
最初的回答:
<form method="post" action="?" class="ui-recaptcha" name="my_form_name">
...
<input type="submit" value="Submit">
</form>
<script src="//www.google.com/recaptcha/api.js?render={key}" async defer></script>
JavaScript(我正在使用jQuery,但很容易适应原始JS)
最初的回答:
$('.ui-recaptcha').submit(e => {
var form = e.target;
if( $(form).data('recaptcha-done') )
return;
e.preventDefault();
grecaptcha.execute('{key}', {'action': $(form).attr('name')}).then(token => {
$(form).append($('<input>').attr({'type': 'hidden', 'name': 'g-recaptcha-response', 'value': token}));
$(form).data('recaptcha-done', true);
$(form).submit();
});
});
submit
会导致一个循环,这是有道理的,因为reCAPTCHA处理程序在submit
事件上运行。ui-recaptcha
表单运行reCAPTCHA,将表单的name
属性作为操作传递到reCAPTCHA控制台中,然后将令牌插入表单。运行一次后,它会在表单上设置一个数据属性,以便递归调用提交时不会再次运行reCAPTCHA。这个解决方案与@PigBoT的解决方案类似,但增加了reportValidity()并使用ReCAPTCHA v3
致谢https://github.com/ambethia/recaptcha/issues/302#issuecomment-621794131
<script src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript">
function contactOnSubmit(token) {
var contactForm = document.getElementById('contactUs');
if(contactForm.checkValidity()) {
//SERVER SIDE VALIDATION here,
//on success, contactForm.submit();
} else {
grecaptcha.reset();
contactForm.reportValidity();
}
}
</script>
表单(id="contactUs")
<button class="g-recaptcha" data-sitekey="..." data-callback="contactOnSubmit" data-action="submit">Submit</button>
"Can I Use" 网站目前报告 97% 的使用情况支持 checkValidity() https://caniuse.com/?search=checkValidity
let siteKey = "...";
$("form").submit(function (eventObj) {
var myForm = this;
eventObj.preventDefault();
grecaptcha.execute( siteKey, {
action: "submit"
})
.then(function (token) {
$('<input />').attr('type', 'hidden')
.attr('name', "g_recaptcha_response")
.attr('value', token)
.appendTo(myForm);
myForm.submit();
});
});
这将执行reCAPTCHA,等待响应,在浏览器尝试提交表单时向任何表单添加隐藏属性g_recaptcha_response,然后实际提交它。您需要全局变量siteKey。
我想要相同的行为,但是使用新的reCAPTCHA,即隐形的reCAPTCHA。经过查看一些代码和测试一些东西,我进入了这个领域。主要区别在于这个也使用默认的浏览器验证:
var contact_form;
$(function() {
contact_form = $('#contact-form');
contact_form.submit(function (event) {
if ( ! contact_form.data('passed')) {
event.preventDefault();
grecaptcha.execute();
}
});
});
function sendContactForm(token) {
contact_form.data('passed', true);
contact_form.submit();
}
它基本上将jquery表单对象存储在全局变量中,包括使用sendContactForm
作为回调,但是当由recaptcha调用时,它设置了一个名为passed
的数据变量,这允许表单不被阻止。这与recaptcha通常所做的完全相同,但有这个条件。
更新:重新审视我的代码提醒我,它可能需要一种在grecaptcha执行后恢复传递给false
的数据的方法。如果您要实施此功能,请考虑这一点。
grecaptcha.execute()
。 - Julio GuerraformSubmit()
需要为空吗? - Black