php HTML所需属性不适用于Google recaptcha

ui7jx7zq 于 2023-08-02 发布在 PHP

关注(0)|答案(3)|浏览(102)

当我实现google recaptcha时，需要输入字段上的属性 * 不起作用。当输入为空时，假定不提交表单。“但是表单在输入为空时提交。“我按照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>

型

php

来源：https://stackoverflow.com/questions/49310529/html-required-attribute-doesnt-work-with-google-recaptcha

3条答案

按热度按时间

r55awzrz1#

查看您链接到的文档，您可能更好地摆脱required属性，并在脚本中添加一个检查，如果I put字段为null，则不提交表单。
所以JavaScript会检查字段是否为空，然后给予验证警报，或者最适合您的情况。

赞(0）回复(0）举报 2023-08-02

ecfsfe2w2#

我知道这个问题是5年前的事了，但它仍然在发生，我想分享最实际的解决方案
Google的说明如下：

<!-- 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验证将继续发生，并显示必填字段的指示。只有正确填写所有必填字段（表格已验证），才会发送表格。
Credits：@brandonaaron

赞(0）回复(0）举报 2023-08-02

goqiplq23#

它提交的原因是你的JavaScript函数直接调用了submit，这绕过了HTML5唯一的验证。提交按钮是一个类型的'提交'将为您自动提交，所以你不需要它。

赞(0）回复(0）举报 2023-08-02