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

Question

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

我正在尝试在提交并验证HTML5表单后运行javascript函数。 我尝试使用onSubmit。 在这种情况下，验证会在输入表单时进行，但是Submit不会执行任何操作，并且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>