Validating HTML Input fields when uploading file using google HTML Service

Question

I have been tinkering with this problem for most of today and cannot seem to get to a solution with my problem.

I found a script using .gs and html and javascript online which allowed me to upload a file to a google form. At issue though is that I am trying to modify the form to ensure that individuals who upload a file also include their name and email.

I am including my code below.

Essentially, after I call the submit button, I cannot get the code to check the 2 given fields. Can you provide some advice? If I take the 'check' out, the program runs. However, I cannot get the code right to check that the fields are filled out.

Thanks in advance.

/* The script is deployed as a web app and renders the form */
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html')
            .setSandboxMode(HtmlService.SandboxMode.NATIVE);
  // This is important as file upload fail in IFRAME Sandbox mode.
}
 
/* This function will process the submitted form */
function uploadFiles(form) {
  
  try {
    
    /* Name of the Drive folder where the files should be saved */
    var dropbox = form.myName + "Design request form folder" + form.myEmail;
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    
    /* Find the folder, create if the folder does not exist */
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    /* Get the file uploaded though the form as a blob */
    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    
    /* Set the file description as the name of the uploader */
    file.setDescription("Uploaded by " + form.myName);
        
    /* Return the download URL of the file once its on Google Drive */
    return "File uploaded successfully " + file.getUrl();
    
  } catch (error) {
    
    /* If there's an error, show the error message */
    return error.toString();
  }
  
}

<!-- Include the Google CSS package -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
 
<!-- You can also include your own CSS styles -->
<style>
  form { margin: 40px auto; }
  input { display:inline-block; margin: 20px; }
</style>
 
<script>
  
  // The function will be called after the form is submitted
  function uploadFile() {
  var x=document.coForm.fieldName.value;
  if (x == null || x ==""){
   alert(x);
  return false;}

    document.getElementById('uploadFile').value = "Uploading File..";
    google.script.run
       .withSuccessHandler(fileUploaded)
       .uploadFiles(document.getElementById("coForm"));
    return false;
  }
 
  // This function will be called after the Google Script has executed
  function fileUploaded(status) {
    document.getElementById('coForm').style.display = 'none';
    document.getElementById('output').innerHTML = status;
  }
  
</script>
 
<!-- This is the HTML form -->
<form id="coForm" name="coForm">
 
  <!-- Text input fields -->
  <input type="text" class="required" id="fieldName" name="myName" placeholder="Your name..">
  <input type="email" class="required" id="fieldEmail" name="myEmail" placeholder="Your email..">
 
  <!-- File input filed -->
  <input type="file" name="myFile">
 
  <!-- The submit button. It calls the server side function uploadfiles() on click -->
  <input type="submit" id="uploadFile" value="Upload File" onsubmit="uploadFile();">
</form>
 
<!-- Here the results of the form submission will be displayed -->
<div id="output"></div>
 

Answer 1

Make the "Submit" button a regular button and change the attribute to onmouseup:

<input type="button" id="uploadFile" value="Upload File" onmouseup="uploadFile();">

Remove class="required" from the input fields:

<!-- Text input fields -->
  <input type="text" id="fieldName" name="myName" placeholder="Your name..">
  <input type="email" id="fieldEmail" name="myEmail" placeholder="Your email..">

Add this code to your uploadFile() function:

function uploadFile() {
  var name = document.getElementById('fieldName').value;
  var email = document.getElementById('fieldEmail').value;

  console.log('name: ' + name);
  console.log('email: ' + email);

  if (name === "" || email === "") {
    alert("Your name and/or email is missing!");
    return;
  };

Note the console.log() statements. They print information to the browsers console log. To open the browsers log, hit the f12 key, (for Chrome and some others)