时间戳

首页 > 解决方案 > 我在哪里可以找到使用 Firefox DevTools 的 onSubmit 表单字段检查？

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

问题描述

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

我试图找到执行检查的 javascript，但找不到它。我运行了 Firefox DevTools 运行时分析并检查了火焰图以查看 javascript 调用堆栈。在那里我发现了一些 jquery 函数，但 afaik 不能是全部，因为表单字段检查不是由 jQuery 完成的。

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

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

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

我很感激任何提示。我已经花了几个小时来解决这个问题。

标签： javascriptformssilverstripedevtoolsonsubmit

解决方案

我有 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>

推荐阅读