我希望只有在验证 HTML5 表单输入后才运行 javascript 函数

Question

我看到有人问过这个问题的变体，但我没有看到任何可以用来解决我的问题的答案。

我正在尝试在提交并验证 HTML5 表单后运行 javascript 函数。我试过使用 onSubmit。在这种情况下，验证发生在表单的输入上，但提交什么也不做，并且 javascript 函数永远不会运行。也就是说，我单击提交按钮并且我的输入窗口消失了，但是我应该在提交时看到的消息没有出现，并且从 onSubmit 调用的脚本没有运行。该代码如下所示：

我尝试过使用 onClick 而不是 onSubmit。在这种情况下，如果我在表单输入中的任何位置按 Enter 或单击提交按钮，则不会发生 HTML5 验证并提交表单。与上面的代码相同，只是使用的是 onClick 而不是 onSubmit。

我在提交之后尝试运行什么脚本并不重要。使用 onClick 会导致脚本运行，但输入未经过验证，在这种情况下，脚本会按预期运行。这是我用作表单输入的 HTML：

<form id="myForm">
    <fieldset>
      <table>
        <tr>
          <td><label for="rfiTitle" style="font-weight: bold">RFI Title</label><label style="color:red; font:bold">**</label></td>
          <td><input type="text" maxlength = "200" name="rfiTitle" id="rfiTitle" form="myForm" size="40" placeholder="short summary, max length 200 characters" required></td>
        </tr>
        <tr>
          <td><label for="submitter" style="font-weight: bold">Submitter's Name</label><label style="color:red; font:bold">**</label></td>
          <td><input type="text" maxlength = "100" name="submitter" id="submitter" form="myForm" size="40" placeholder="full name, max length 100 characters" required></td>
        </tr>
        <tr>
          <td><label for="submitterEmail" style="font-weight: bold">Submitter's Email</label><label style="color:red; font:bold">**</label></td>
          <td><input type="email" name="submitterEmail" id="submitterEmail" form="myForm" size="40" placeholder="full email" required></td>
        </tr>
      </table>
     </fieldset>
<input type="submit" value="Submit" onsubmit="this.value='The form is uploading..';
         google.script.run.withSuccessHandler(fileUploaded).formHandler(this.parentNode); return false;">
</form>

我希望该函数仅在成功提交后运行，其中填写了必填字段。根据我在 stackoverflow 上阅读的内容，听起来我需要使用类似的东西：

document.getElementById('myform').onsubmit = function(e) {
   Logger.log("into onsubmit fct:"+e);
    generateGUTS();
    e.preventDefault();
}
function generateGUTS(){
    google.script.run.withSuccessHandler(fileUploaded).formHandler(this.parentNode);
                    return false;
    alert('Generating GUTS ticket');
}

但是，我不知道如何在我的 HTML 输入中使用它。任何帮助将不胜感激。谢谢。

Answer 1

只需添加脚本标签，然后添加您的功能

<script type="text/javascript">

 document.getElementById('myform').onsubmit = function(e) {
   Logger.log("into onsubmit fct:"+e);
    generateGUTS();
    e.preventDefault();
}
function generateGUTS(){
    google.script.run.withSuccessHandler(fileUploaded).formHandler(this.parentNode);
                    return false;
    alert('Generating GUTS ticket');
}

</script>