Question

我有一个禁用的提交按钮，我似乎无法在成功进行Google reCaptcha并检查输入框中是否有文字后启用。

我在下面使用HTML和2个单独的JS文件，但JS文件似乎只是单独工作而不是一起工作。有没有办法验证reCaptcha并检查文本框是否填充在一起？我找不到任何类似的答案。

HTML：

<input type="text" name="em" ID="em" class="form-item input-address" placeholder="Email"></input>
<button type="submit" class="submit start" id="button1" alt="Submit" disabled="disabled"></button>
</br>
<?php foreach ($_POST as $key=> $value) { echo '
<p><strong>' . $key.':</strong> '.$value.'</p>'; } ?>
<div class="g-recaptcha" data-sitekey="{key}" data-callback="enableBtn"></div

recaptcha.js（这可以单独使用）：

//Disable Button if No reCaptcha
$("#button1").prop("disabled", true);

function enableBtn() {
$("#button1").removeAttr('disabled');
}

如果输入区域中没有文字，我想要执行的操作也会被禁用。我试过这个并且有效：

input.js（这也可以单独使用，但不能用于recaptcha.js）：

//Disable Button if Input Empty
$(document).ready(function() {
$('.input-address').keyup(function() {

var empty = false;
$('.input-address').each(function() {
if ($(this).val().length == 0) {
empty = true;
}
});

if (empty) {
$("#button1").prop("disabled", true);
} else {
$("#button1").removeAttr('disabled');
}
});
});

Answer 1

我假设您正在使用Recaptcha的程序化版本。首先需要在recaptcha调用中包含回调。像这样的东西

recaptchaWidget1 = grecaptcha.render('recaptchaDiv1', {
     'sitekey'  : 'site-key-goes-here',
     'theme'        : 'light',
     'callback' : 'enableBtn'
});

或者，您可以使用数据属性

设置回调

<div class="g-recaptcha" data-sitekey="your_site_key" data-callback="enableBtn"></div>

接下来做回调：

var enableBtn = function () {
    $("#button1").removeAttr('disabled');
}

关于它。只要回调存在就应该有效。

reCaptcha和输入填充JS

1 个答案: