Making Fields Required in this Google Forms Submitter Script

Making Fields Required in this Google Forms Submitter Script

Hi, I came across the following script - and it's been awhile since I looked at and don't remember where I came up on it. GitHub I believe. At any rate, I was revisiting it and I need some help.

The form submissions work. When someone fills out the form results go to the Google Form as anticipated. However, none of the fields are currently required.

That's what I need help with. Where in the following script would I check if certain fields were filled out and report back to the user on submit? And what would be the template code to use to accomplish this?

None of the validEmail functionality that's currently in the script seems to do anything as I can put 'blah' in the email  field and it submits w/o error.

Thanks!

  1. (function() {
  2.   function validEmail(email) {
  3.     var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
  4.     return re.test(email);
  5.   }

  7.   function validateHuman(honeypot) {
  8.     if (honeypot) {  //if hidden form filled up
  9.       console.log("Robot Detected!");
  10.       return true;
  11.     } else {
  12.       console.log("Welcome Human!");
  13.     }
  14.   }

  16.   // get all data in form and return object
  17.   function getFormData(form) {
  18.     var elements = form.elements;

  20.     var fields = Object.keys(elements).filter(function(k) {
  21.           return (elements[k].name !== "honeypot");
  22.     }).map(function(k) {
  23.       if(elements[k].name !== undefined) {
  24.         return elements[k].name;
  25.       // special case for Edge's html collection
  26.       }else if(elements[k].length > 0){
  27.         return elements[k].item(0).name;
  28.       }
  29.     }).filter(function(item, pos, self) {
  30.       return self.indexOf(item) == pos && item;
  31.     });

  33.     var formData = {};
  34.     fields.forEach(function(name){
  35.       var element = elements[name];
  36.       
  37.       // singular form elements just have one value
  38.       formData[name] = element.value;

  40.       // when our element has multiple items, get their values
  41.       if (element.length) {
  42.         var data = [];
  43.         for (var i = 0; i < element.length; i++) {
  44.           var item = element.item(i);
  45.           if (item.checked || item.selected) {
  46.             data.push(item.value);
  47.           }
  48.         }
  49.         formData[name] = data.join(', ');
  50.       }
  51.     });

  53.     // add form-specific values into the data
  54.     formData.formDataNameOrder = JSON.stringify(fields);
  55.     formData.formGoogleSheetName = form.dataset.sheet || "responses"; // default sheet name
  56.     formData.formGoogleSendEmail = form.dataset.email || ""; // no email by default

  58.     console.log(formData);
  59.     return formData;
  60.   }

  62.   function handleFormSubmit(event) {  // handles form submit without any jquery
  63.     event.preventDefault();           // we are submitting via xhr below
  64.     var form = event.target;
  65.     var data = getFormData(form);         // get the values submitted in the form

  67.     /* OPTION: Remove this comment to enable SPAM prevention, see README.md
  68.     if (validateHuman(data.honeypot)) {  //if form is filled, form will not be submitted
  69.       return false;
  70.     }
  71.     */

  73.     if( data.email && !validEmail(data.email) ) {   // if email is not valid show error
  74.       var invalidEmail = form.querySelector(".email-invalid");
  75.       if (invalidEmail) {
  76.         invalidEmail.style.display = "block";
  77.         return false;
  78.       }
  79.     } else {
  80.       disableAllButtons(form);
  81.       var url = form.action;
  82.       var xhr = new XMLHttpRequest();
  83.       xhr.open('POST', url);
  84.       // xhr.withCredentials = true;
  85.       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  86.       xhr.onreadystatechange = function() {
  87.           console.log(xhr.status, xhr.statusText);
  88.           console.log(xhr.responseText);
  89.           var formElements = form.querySelector(".form-elements")
  90.           if (formElements) {
  91.             formElements.style.display = "none"; // hide form
  92.           }
  93.           var thankYouMessage = form.querySelector(".thankyou_message");
  94.           if (thankYouMessage) {
  95.             thankYouMessage.style.display = "block";
  96.           }
  97.           return;
  98.       };
  99.       // url encode form data for sending as post data
  100.       var encoded = Object.keys(data).map(function(k) {
  101.           return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
  102.       }).join('&');
  103.       xhr.send(encoded);
  104.     }
  105.   }
  106.   
  107.   function loaded() {
  108.     console.log("Contact form submission handler loaded successfully.");
  109.     // bind to the submit event of our form
  110.     var forms = document.querySelectorAll("form.gform");
  111.     for (var i = 0; i < forms.length; i++) {
  112.       forms[i].addEventListener("submit", handleFormSubmit, false);
  113.     }
  114.   };
  115.   document.addEventListener("DOMContentLoaded", loaded, false);

  117.   function disableAllButtons(form) {
  118.     var buttons = form.querySelectorAll("button");
  119.     for (var i = 0; i < buttons.length; i++) {
  120.       buttons[i].disabled = true;
  121.     }
  122.   }
  123. })();