I want to have a javascript function run only after HTML5 form input has been validated

Question

I see variations of this question have been asked, but I don't see any answers that I can use to solve my problem.

I'm trying to have a javascript function run AFTER an HTML5 form has been submitted and validated. I have tried using onSubmit. In that case, the validation happens on input to the form, but the submit does nothing and the javascript function never runs. That is, I click the submit button and my input window disappears, but the message I am supposed to see on submit does not appear and the script that gets called from the onSubmit does not run. That code looks like:

I have tried using onClick rather than onSubmit. In that case, the HTML5 validation does not occur and the form is submitted if I hit Enter or click on the submit button at any point in the form input. That is the same code as above except onClick is used rather than onSubmit.

It doesn't matter what the script is that I try to run following the submit. Using onClick causes the script to run but the input is not validated and in that case, the script runs as expected. Here is the HTML I'm using as the form input:

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

I would like the function to be run only after a successful submission, where the required fields are filled in. From what I've read on stackoverflow, it sounds like I need to use something like:

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');
}

However, I can't figure out how to use it with my HTML input. Any help would be greatly appreciated. Thank you.

Answer 1

just add script tag and then add your function

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