title: run.google.script only if form is complete
body: <p>I'm trying to create a form using the google scripts that will not allow submission unless all the fields are entered. Currently, I use the "onclick" command to run a google script that send the form data and files to my google drive. However, I only want the form to be submittable if certain fields are filled in (those marked required). If I remove the google.script.run command from the "onclick" portion of the submit button, then the form creates alerts/messages that say the user must fill in the required form. These messages do not appear when the google.script.run command is included. I haven't figured out a way to make it so that the google.script.run command only runs if all fields are completed.</p>
  
  <pre><code>&lt;!-- Include the Google CSS package --&gt;
  &lt;link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css"&gt;
  
  &lt;!-- You can also include your own CSS styles --&gt;
  &lt;style&gt;
    form { margin: 40px auto; }
    input { display:inline-block; margin: 20px; }
  &lt;/style&gt;
  
  &lt;form id="myForm" name="myForm"&gt;
  
    &lt;label for="myFirstName"&gt; First Name *&lt;/label&gt;
    &lt;input type="text" name="myFirstName" placeholder="First name" style="width: 150px;" required&gt;
  
    &lt;fieldset&gt;
    &lt;legend&gt; Personal Information &lt;/legend&gt;
    &lt;div class="inline form-group"&gt;
    &lt;/div&gt;
  
    &lt;div class="inline form-group"&gt;
    &lt;label for="myLastName"&gt; Last Name* &lt;/label&gt;
    &lt;input type="text" name="myLastName" placeholder="Last Name" style="width: 150px;" required&gt;
    &lt;/div&gt;
  
    &lt;div class="inline form-group"&gt;
    &lt;label for="myEmail"&gt; Email* &lt;/label&gt;
    &lt;input type="email" name="myEmail" placeholder="" style="width: 150px;" required&gt;
    &lt;/div&gt;
  
    &lt;div class="inline form-group"&gt;
    &lt;label for="visa"&gt; Check if you will require visa assistance. Otherwise, ignore. &lt;/label&gt;
    &lt;input type="checkbox" name="visa" value="Yes"&gt;
    &lt;/div&gt;
    &lt;/fieldset&gt;
  
    &lt;fieldset&gt;
    &lt;legend&gt; Documents &lt;/legend&gt;
    &lt;div class="inline form-group"&gt;
    &lt;label for="CV"&gt; CV* &lt;/label&gt;
    &lt;input type="file" name="CV" required&gt;
    &lt;/div&gt;
  
    &lt;div class="inline form-group"&gt;
    &lt;label for="CoverLetter"&gt; Cover Letter &lt;/label&gt;
    &lt;input type="file" name="CoverLetter"&gt;
    &lt;/div&gt;
    &lt;/fieldset&gt;
  &lt;p&gt;  &lt;/p&gt;
  &lt;input id="submitbutton" type="submit" style="margin-left:450px" value="Submit Application" 
         onclick="this.value='Submitting...';          
  google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode);
         return false;"&gt;
  &lt;/form&gt;
  
  &lt;div id="output"&gt;&lt;/div&gt;
  
  &lt;script&gt;
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
  &lt;/script&gt;
  
  &lt;style&gt;
   input { display:block; margin: 20px; }
  &lt;/style&gt;
  </code></pre>
  
  <p>The googlescript runs fine. I'm also aware of some similar questions about form validation. The google script specific ones do not use the same form format (they create the form in google script). I would like to make as minimal changes as possible to achieve the required functionality.</p>
  
  <p>Any help would be appreciated.</p>
  
  <hr>
  
  <p>Current code for jquery:</p>
  
  <pre><code> $('#submitbutton').on('click', function() {
      $(this).val("Validating...");
      //check for required fields
      var emptyFields = $('[required]').filter(function() {
         $(this).removeClass("warning");
         if ($(this).val().length === 0){
           $(this).addClass("warning")
           return true
         } else {
           return false
         }
     });
  
     if (emptyFields.length === 0) {
              google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode);
      } else{
         $(this).val("Submit Application")
      }
  });
  </code></pre>