双提交按钮表单集成hCaptcha时的验证失败问题求助

阿华AIGC实验室

2026-5-1

解决hCaptcha在双提交按钮表单中的「missing-input-response」问题

我之前也碰到过几乎一模一样的场景，其实问题出在hCaptcha对多个带h-captcha类的按钮的绑定逻辑上——它只会把验证事件绑定到页面中最后一个带有该类的按钮上，导致第一个按钮触发的验证流程根本没把token正确注入到表单里，自然会报「missing-input-response」错误。

问题根源拆解

你原来的代码里给两个提交按钮都加了h-captcha类和相同的回调，hCaptcha初始化时会遍历页面元素，最后只会把验证逻辑绑定到第二个按钮（submit2）上。当你点击第一个按钮时，看似触发了验证，但实际上回调里的submit()并没有携带hCaptcha生成的token，后端自然拿不到响应值。

可行解决方案

核心思路是：把hCaptcha的验证和按钮提交解耦，不要直接把h-captcha类绑在按钮上，而是单独用一个隐藏的hCaptcha容器，然后给两个按钮各自添加点击事件，先触发验证，验证通过后再手动提交表单并标记触发的按钮。

修改后的完整代码

<?php 
$captcha = 0;
$action = '';
if(isset($_POST['h-captcha-response']) && isset($_POST['action'])) {
    $data = array(
        'secret' => "my_secret",
        'response' => $_POST['h-captcha-response']
    );
    $verify = curl_init();
    curl_setopt($verify, CURLOPT_URL, "https://hcaptcha.com/siteverify");
    curl_setopt($verify, CURLOPT_POST, true);
    curl_setopt($verify, CURLOPT_POSTFIELDS, http_build_query($data));
    curl_setopt($verify, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($verify);
    var_dump($response);
    $responseData = json_decode($response);
    if($responseData->success) {
        $captcha = 1;
        $action = $_POST['action'];
        // 这里可以根据$action处理不同的逻辑：perform1或perform2
        if($action === 'perform1') {
            // 执行操作1的逻辑
        } elseif($action === 'perform2') {
            // 执行操作2的逻辑
        }
    }
} else {
    $captcha = 1;
}

if($captcha == 1) { 
?>
<html>
<head>
</head>
<body>
<form action="#" method="POST" id="form_">
    <textarea name="input_" rows="1" cols="40" id="input"></textarea><br/>
    <!-- 隐藏的hCaptcha容器，不再绑定到按钮上 -->
    <div class="h-captcha" data-sitekey="mykey" data-callback="handleCaptchaSuccess" style="display:none;"></div>
    <!-- 隐藏输入框，标记触发提交的按钮 -->
    <input type="hidden" name="action" id="action" value="">
    <!-- 普通提交按钮，移除hCaptcha相关属性 -->
    <input type="submit" name="perform1" value="perform1" id="submit1" onclick="triggerCaptcha('perform1'); return false;">
    <input type="submit" name="perform2" value="perform2" id="submit2" onclick="triggerCaptcha('perform2'); return false;">
    <br/>
</form>
<script type="text/javascript">
// 触发hCaptcha验证的函数
function triggerCaptcha(action) {
    // 先设置当前要执行的操作类型
    document.getElementById('action').value = action;
    // 手动触发hCaptcha验证弹窗
    hcaptcha.execute();
}

// hCaptcha验证成功后的回调
function handleCaptchaSuccess(token) {
    // 验证通过后再提交表单，确保token被携带
    document.getElementById('form_').submit();
}
</script>
<!-- 引入hCaptcha官方脚本（你原代码中遗漏了这一步） -->
<script src="https://hcaptcha.com/1/api.js" async defer></script>
</body>
</html>
<?php } ?>

关键修改点说明

移除按钮上的hCaptcha属性：把h-captcha类移到一个隐藏的div容器里，彻底避免多个按钮的绑定冲突。
添加隐藏的action字段：用来标记是哪个按钮触发的提交，后端可以通过这个值区分执行perform1还是perform2的逻辑。
手动触发验证流程：给每个按钮添加onclick事件，先设置action值，再调用hcaptcha.execute()触发验证，return false阻止按钮默认的提交行为，避免提前提交表单。
统一验证回调：验证成功后再提交表单，确保hCaptcha生成的token能被正确携带到后端。