Question

我将Google reCaptcha集成到网站表单中。之前，在表单上提交webapp，检查是否填写了所有表单。在集成reCaptcha之后，此表单检查不再运行，即使字段为空，该表单也仍然发送。

我试图找到执行检查的javascript，但找不到。我运行了Firefox DevTools Runtime Analysis，并检查了Flame Chart以查看javascript调用堆栈。在那里，我发现了一些jquery函数，但afaik不能一概而论，因为表单字段检查不是由jQuery完成的。

我可以通过什么方式发现，调用了什么javascript函数来进行检查？或者可以在其他地方进行检查，例如在CSS中。

也很奇怪：在整个项目代码的任何地方都找不到发布的错误消息“请填写此字段”。我签入了我的IDE。

该网页使用twitter Bootstrap，jQuery 1.12.4并在带有userforms模块的Silverstripe CMS 3.6上运行（尽管此特定形式出现在相应的页面模板中）。

我非常感谢。我已经花了几个小时解决这个问题。

Answer 1

我在那里遇到2个问题：

-首先：我有一个id为“ submit”的提交按钮，如Google reCaptcha文档示例（https://developers.google.com/recaptcha/docs/invisible）中所示。但是，如果与jQuery（http://api.jquery.com/submit/）一起使用，则可能导致“混乱的失败”。因此，我将按钮重命名为id =“ submit_button”，并提交了表单。

-第二：表单验证是通过HTML5完成的，我不知道它是否存在。这是通过输入表单字段的“必填”属性激活的。真可惜！

我的表单现在可以正常工作，并且看起来像这样：

<h2>Anfrage</h2>
<form action="formaction.php" method="post" id="form-offer"  class="form-std form-offer" enctype="multipart/form-data" >
    <fieldset>
        <label>Firma * <input name="firma" required="" type="text"></label>
        <select name="anrede" required="">
            <option value="">Anrede *</option>
            <option value="Herr">Herr</option>
            <option value="Frau">Frau</option>
        </select>
        <label>Name und Vorname Kontaktperson *<input name="vorname" required="" type="text"></label>
        <label>PLZ &amp; Ort *<input name="ort" required="" type="text"></label>
        <label>Adresse *<input name="adresse" required="" type="text"></label>
        <select name="land" required="">
            <option value="">Land *</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Ägypten">Ägypten</option>
            <option value="Aland">Aland</option>
            <option value="Albanien">Albanien</option>
        </select>
        <label>E-Mail *<input name="email" required="" type="email"></label>
        <label>Telefon *<input name="telephone" required="" type="text"></label>
    </fieldset>
    <div class="g-recaptcha"
         data-sitekey="sdfsdfsdfsdfsdf"
         data-size="invisible"
         data-callback="formSubmit">
    </div>

    <button id="submit_button">Send<i class="icon icon-chevron-right"></i></button>

    <input name="block" value="167" type="hidden">
    <input name="locale" value="de_DE" type="hidden">
</form>

<link rel="stylesheet" type="text/css" href="body.min.css">


<script src="jquery-12.js"></script>
<script defer="" src="main.js"></script>

<script src="https://www.google.com/recaptcha/api.js"></script>

<script>
    (function($, document, undefined){

        $('#form-offer').submit(function (event) {
            event.preventDefault();
            grecaptcha.reset();
            grecaptcha.execute();
        });

    })(jQuery, document, undefined);

    function formSubmit(response) {
        // submit the form which now includes a g-recaptcha-response input
        var myForm = document.getElementById("form-offer");
        myForm.submit();
    }
</script>

在哪里可以找到使用Firefox DevTools的onSubmit表单字段检查？

1 个答案: