我发现您的解决方案很有趣 (@FabioG)。
但是，我自己修改了一下，也愿意分享代码给别人使用。
我正在制作一个交互式表单，该表单会在您完成步骤时进行验证。
它用于订购食物。因此，表单需要验证和激活注册按钮，并且它使用的是迄今为止最新的 reCaptcha（2016 年 5 月 12 日）。
此外，此代码处理过期的 reCaptcha，通过 ajax 进行服务器端验证（虽然不包括在内 - 如果有人需要它，请随时评论我的答案，我会相应地对其进行编辑）。
让我们开始吧。
HTML 代码：
<form id="registerForm" method="get" action="">
<fieldset class="step-1">
<h4>Step One:</h4>
<span class="clock">Register under one minute!</span>
<label for="email-register" class="label">E-mail*</label>
<input id="email-register" name="email-register" type="email" value="" autocomplete="off"/>
<label for="password-register" class="label">Password*</label>
<input id="password-register" name="password-register" type="password" value="" autocomplete="off"/>
<div class="g-recaptcha" data-sitekey="6LeS4O8SAAAAALWqAVWnlcB6TDeIjDDAqoWuoyo9" data-callback="recaptchaCallback" data-expired-callback="recaptchaExpired" style="margin-top: 3rem;"></div>
<input id="hidden-grecaptcha" name="hidden-grecaptcha" type="text" style="opacity: 0; position: absolute; top: 0; left: 0; height: 1px; width: 1px;"/>
</div>
</fieldset>
<fieldset class="step-2">
<h4>Step two:</h4>
<span class="notice">All fields with a sign are required!*</span>
<label for="first-name" class="label">First Name*</label>
<input name="first-name" id="first-name" type="text" value="" />
<label for="last-name" class="label">Last Name*</label>
<input name="last-name" id="last-name" type="text" value="" />
<label for="address" class="label">Address*</label>
<input name="address" id="address" type="text" value=""/>
<label for="entrance" class="label">Entrance</label>
<input name="entrance" id="entrance" type="text" value=""/>
<label for="apartment-number" class="label">Apartment #</label>
<input name="apartment-number" id="apartment-number" type="text" value="" />
<label for="inter-phone" class="label">Interphone</label>
<input name="inter-phone" id="inter-phone" type="text" value=""/>
<label for="telephone" class="label">Mobile Number*</label>
<input name="telephone" id="telephone" type="text" value="" />
<label for="special-instructions" class="label">Special Instructions</label>
<textarea name="special-instructions" id="special-instructions"></textarea>
<div>
</fieldset>
<button class="button-register" disabled>Register</button>
</form>
如您所见，提交按钮（“.button-register”）最初是禁用的。
您只能通过填写必填 (*) 字段来启用它。
请记住，我没有包含任何 CSS。该表格是最低限度的，仅用于教育目的。
很少有与@FabioG 不同的地方，答案是：
无需隐藏元素或使用“.ignore”。我已经用内联 CSS 隐藏了它。
成功的reCaptcha和过期的reCaptcha都有一个响应回调。
因此，如果您的 reCaptcha 在填写表单时过期，它将使其无效并且该按钮将再次禁用。
同样，表单使用输入字段（隐藏输入字段）将信息传递到 AJAX（稍后将介绍 PHP）并在服务器端验证它 （这是一个潜在的安全风险，我已经介绍了更多）在正文的末尾）。
让我们继续讨论 JavaScript/jQuery。
JavaScript/jQuery：
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
function recaptchaCallback() {
var response = grecaptcha.getResponse(),
$button = jQuery(".button-register");
jQuery("#hidden-grecaptcha").val(response);
console.log(jQuery("#registerForm").valid());
if (jQuery("#registerForm").valid()) {
$button.attr("disabled", false);
}
else {
$button.attr("disabled", "disabled");
}
}
function recaptchaExpired() {
var $button = jQuery(".button-register");
jQuery("#hidden-grecaptcha").val("");
var $button = jQuery(".button-register");
if (jQuery("#registerForm").valid()) {
$button.attr("disabled", false);
}
else {
$button.attr("disabled", "disabled");
}
}
function submitRegister() {
//ajax stuff
}
(function ($, root, undefined) {
$(function () {
'use strict';
jQuery("#registerForm").find("input").on("keyup", debounce(function() {
var $button = jQuery(".button-register");
if (jQuery("#registerForm").valid()) {
$button.attr("disabled", false);
}
else {
$button.attr("disabled", "disabled");
}
}, 1000));
jQuery("#registerForm").validate({
rules: {
"email-register": {
required: true,
email: true
},
"password-register": {
required: true,
minlength: "6"
},
"first-name": "required",
"last-name": "required",
address: "required",
telephone: "required",
"hidden-grecaptcha": {
required: true,
minlength: "255"
}
},
messages: {
"email-register": "Enter valid e-mail address",
"password-register": {
required: "Enter valid password",
minlength: "Password must be bigger then 6 chars!"
},
"first-name": "Required!",
"last-name": "Required!",
address: "Required!",
telephone: "Required!"
},
submitHandler: submitRegister
});
});
})(jQuery, this);
正如您在此处看到的，有几个函数：recaptchaCallback() 和 recaptchaExpired()。
recaptchaCallback() 通过数据属性 data-callback 嵌入，使用 grecaptcha.getResponse() 来查看 reCaptcha被验证，如果是，它将令牌输入到隐藏的输入字段并通过 jQuery("#registerForm).validate(); 请求重新验证。
但是，如果 reCaptcha 同时过期，它将使用“data-expired-callback”中分配的函数，从输入字段中删除令牌并再次要求重新验证，这将失败，因为该字段是空的。这是通过 recaptchaExpired() 函数实现的。
在后面的代码中，您可以看到我们添加了一个 jQuery keyup 函数，用于检查重新验证并查看用户是否已将所需信息传递给输入字段。如果信息和字段验证成功，keyup 功能将启用 Register 按钮。
另外，我在 keyup 上使用了去抖动脚本（tnx，David Walsh）。所以它不会导致浏览器延迟。因为，会有很多打字。
但是，请记住，如果用户决定绕过 reCaptcha，他总是可以在输入字段中输入“255”字符长字符串。但是，我更进一步，做了一个 AJAX 验证服务器端来确认 reCaptcha。不过，我没有将其包含在答案中。
我认为这段代码比之前的答案略有改进。如果您有任何问题或需要 AJAX/PHP 代码，请随时发表评论。有空我会提供的。
这里还有 codepen：reCaptcha with jQuery.validation
您可以在其 API 中找到有关 reCatpcha 数据属性和函数的所有信息：reCaptcha API
希望它对某人有所帮助！
问候，