HTML 必需属性不适用于 google recaptcha

Question

google 的指南

以最简单的形式实现了它。 <?php if (isset($_POST['code']) && ($_POST['code'] == "whatever")) //do stuff?> ?>

我想要做的是让 recaptcha 仅在输入不为空时执行，否则阻止表单提交和 recaptcha 执行。

<form id="form1" method="post" >
 
  <input name="code" type="text" required>

  <button  data-sitekey="xxx" 
      data-callback='onSubmit' type="submit" class="g-recaptcha" >Let me in</button>
  </form>
</div>
      <script>
       function onSubmit(token) {
      document.getElementById("form1").submit();
       }
     </script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

查看您链接到的文档，您可能最好摆脱

required

Answer 1

因此 JavaScript 会检查该字段是否为空，然后发出验证警报，或者最适合您的情况。

我知道这个问题已经有 5 年历史了，但这种情况仍然会发生，我想分享最实用的解决方案

Answer 2

<!-- In your form, change your submit button -->
<button class="g-recaptcha" 
        data-sitekey="PUT_YOUR_reCAPTCHA_SITE_KEY" 
        data-callback='onSubmit' 
        data-action='submit'>Submit</button>

<!-- Include the recaptcha api.js and create the onSubmit function -->
<script src="https://www.google.com/recaptcha/api.js"></script>
    <script>
        function onSubmit(token) {
            document.getElementById("YOUR_FORM_ID").submit();
        }
    </script>

这样，您将失去输入的验证，因为 javascript 函数将绕过它。

但是您可以直接通过 javascript 函数调用 html 验证，如下所示：

<script>
    function onSubmit(token) {

        var form = document.getElementById("YOUR_FORM_ID");
        if (form.checkValidity()) {
            form.submit();
        } else {
            grecaptcha.reset();
            form.reportValidity();
        }

    }
</script>

这样，html 验证将继续进行并显示必填字段的指示。仅当所有必填字段均正确填写（表单已验证）时，才会发送该表单。

鸣谢：

@brandonaaron

它提交的原因是您的 JavaScript 函数直接调用提交，这绕过了仅 HTML5 的验证。提交按钮是一种“提交”类型，它将自动为您完成提交，因此您不需要它。

Answer 3