gpt4 book ai didi

javascript - Recaptcha 仅在按下提交时显示,但在 JavaScript/jQuery 中触发?

转载 作者:行者123 更新时间:2023-12-03 01:22:42 24 4
gpt4 key购买 nike

我有一个客户表单的验证码,他们只希望在单击提交按钮时显示验证码。

但是只有当所有输入字段都已填写时,提交按钮才可单击,并且他们希望在字段为空且单击按钮时出现工具提示。

正如您想象的那样,这意味着当有空字段时我无法禁用按钮,因为我需要 .click() 事件。但是,我无法将验证码绑定(bind)到按钮,因为它会自动触发,所以我必须执行一个不可见的验证码,其中 div 具有 data-sitekey 属性和g-recaptcha 类。

所以我需要知道如何通过 JavaScript 触发 recaptcha 事件并使其具有与绑定(bind)到按钮相同的结果。

如果需要更多信息,请告诉我。

编辑:

var fieldsFilled = false;

if(screen.width <= 767) {
$('#fbForm2').find('input, textarea').each(function () {
$(this).keyup(function () {
fieldsFilled = checkFormFieldsEmpty('#fbForm2') && $('#terms').is(":checked");

if(fieldsFilled) {
$("#btnSubmit").css("pointer-events","auto");
} else {
$("#btnSubmit").css("pointer-events","none");
}
});
});

$('#terms').change(function () {
fieldsFilled = checkFormFieldsEmpty('#fbForm2') && $('#terms').is(":checked");

if(fieldsFilled) {
$("#btnSubmit").css("pointer-events","auto");
} else {
$("#btnSubmit").css("pointer-events","none");
}
});
} else {
$('#fbForm').find('input, textarea').each(function () {
$(this).keyup(function () {
fieldsFilled = checkFormFieldsEmpty('#fbForm') && $('#terms').is(":checked");

if(fieldsFilled) {
$("#btnSubmit").css("pointer-events","auto");
} else {
$("#btnSubmit").css("pointer-events","none");
}
});
});

$('#terms').change(function () {
fieldsFilled = checkFormFieldsEmpty('#fbForm') && $('#terms').is(":checked");

if(fieldsFilled) {
$("#btnSubmit").css("pointer-events","auto");
} else {
$("#btnSubmit").css("pointer-events","none");
}
});
}

//Checks if the form id has blank text fields
function checkFormFieldsEmpty(id) {
$(id).find('input, textarea').each(function () {
//Check whether the input/textarea is blank
if(!$(this).val()) {
//If the input/textarea is empty return false
return false;
}
});

return true;
}

$('#btnSubmit').tooltip();

$(document).on('click', '#btnSubmit', function (event) {
if($('#btnSubmit').hasClass('disabled')) {
$('#btnSubmit').tooltip({
animation: false,
delay: {show: 500, hide: 100},
placement: 'right',
text: 'Invalid input fields',
});
} else {
grecaptcha.render('recaptchaField', {
'sitekey' : '6LfDBGcUAAAAABnYRk1ZQkapzCs8c1Rr2ZARMchF',
'callback' : onSubmit,
});
grecaptcha.execute(widgetId);
}
});
//-----------------------------------------------------------------------------------------

//recaptcha
var onSubmit = function (token) {
if (screen.width >= 768) {
document.getElementById("fbForm").submit();
}else if (screen.width <= 767){
document.getElementById("fbForm2").submit();
}
};

</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

...

<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
<!-- NOTE: Made some changes for click events as advised here: https://developers.google.com/recaptcha/docs/invisible#programmatic_execute -->
<button id="btnSubmit" type="submit" value="" class="btn btn-success">SUBMIT <span class="glyphicon glyphicon-send"></span></button>
<div class="g-recaptcha" data-sitekey="6LfDBGcUAAAAABnYRk1ZQkapzCs8c1Rr2ZARMchF" data-callback="onSubmit" data-size="invisible"></div>
<!-- Test: 6LfuAWcUAAAAAEKjLeOZfygAMxAeld1k4UUMGnfN -->
<!-- Live: 6LfDBGcUAAAAABnYRk1ZQkapzCs8c1Rr2ZARMchF -->
</div>
</div>

最佳答案

“但是,我无法将验证码绑定(bind)到按钮,因为它会自动触发...”
这个假设可能是错误的。

您可以使用 .preventDefault() 阻止默认提交行为。因此您可以检查您的输入是否正确...如果是这样,请正常进行。

即:

$('#btnSubmit').on("click",function(e){
e.preventDefault();

// Check all you input are filled
// If yes, then submit for real:
$(this).closest("form").submit();
});

我认为提交时触发验证码没有问题...

关于javascript - Recaptcha 仅在按下提交时显示,但在 JavaScript/jQuery 中触发?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51698002/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com