如何在 Google Apps 腳本中為前端 HTML 中的表單添加驗證？

Question

我有這個 function 來驗證 HTML 表單上的輸入（它是 Google 表格上的側邊欄）：

歸功於芝加哥計算機課程

function validate() {
    var fieldsToValidate = document.querySelectorAll("#userform input, #userform select");
    return Array.prototype.every.call(fieldsToValidate, function(el){
      return el.checkValidity();
    });
  }

然后在將數據添加回我的電子表格之前，我使用 IF 語句調用此 function。

 if(validate()){
      var familyName = document.getElementById("family_name");
      var semester = document.getElementById("semester");
      var rowData = {familyName: family_name.value, semesterApp: semester.value};
      google.script.run.withSuccessHandler(afterRun).addNewRow(rowData);
     } else {
    //  handle this later
     }
  }

它不工作。 下拉菜單無法加載選項，單擊按鈕時不會添加表單中的數據。

如果您能提供任何幫助，我將不勝感激。

這是 HTML 表格：

  <div class="container">
    <div id="userform">
      <div class="form-group">
      <label for="family_name">Family name</label>
      <input type="text" class="form-control" id="family_name" required>
   </div>
     <div class="form-group">
      <label for="semester">Applying for semester</label>
      <select class="form-control" id="semester" required>
        <option></option>
      </select>
     </div>
   <button class="btn btn-primary" id="mainButton">Run</button>
  </div>
  </div>

這是前端腳本：

      function afterButtonClicked(){
  
    if(validate()){
      var familyName = document.getElementById("family_name");
      var semester = document.getElementById("semester");
      var rowData = {familyName: family_name.value, semesterApp: semester.value};
      google.script.run.withSuccessHandler(afterRun).addNewRow(rowData);
     } else {
      handle this later
     }
  }
  
  function afterRun(e) {
    var familyName = document.getElementById("family_name");
    familyName.value = "";
  }
  
  
  function validate() {
    var fieldsToValidate = document.querySelectorAll("#userform input, #userform select");
    return Array.prototype.every.call(fieldsToValidate, function(el){
      return el.checkValidity();
    });
  }
  
  
  function afterSidebarLoads() {
    
    google.script.run.withSuccessHandler(afterDropDownArrayReturned).getDropDownArray();
        
  }
  
  function afterDropDownArrayReturned(arrayOfArrays) {
    var semester = document.getElementById("semester");
  
    arrayOfArrays.forEach(function(r){
      var option = document.createElement("option");
      option.textContent = r[0];
      semester.appendChild(option);
    });
  }
  
  document.getElementById("mainButton").addEventListener("click", afterButtonClicked);
  document.addEventListener("DOMContentLoaded", afterSidebarLoads);

這是在后端運行的兩個函數：

    function addNewRow(rowData) {
  
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet1 = ss.getSheetByName("dataFromInput");
  sheet1.appendRow([rowData.familyName, rowData.semesterApp]);
  
  return true;
    
}

function getDropDownArray() {
  
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet1 = ss.getSheetByName("dropDownMenuSem");
  return sheet1.getRange(2, 1, sheet1.getLastRow()-1, 1).getValues(); // [[AUG - DEC 2020], [FEB - JUN 2021], [AUG - DEC 2021], [FEB - JUN 2022], [AUG - DEC 2022], [FEB - JUN 2023]]
  
}

Answer 1

我也一直在關注Chicago Computers Classes視頻系列，但遇到了同樣的問題。

不幸的是，我無法解釋為什么 function validate() 不起作用，但我已經能夠通過使用.forEach()而不是Array.prototype.every.call()使其起作用。

這是機會之后的代碼：

function validate() {
  var fieldsToValidate = document.querySelectorAll("#userform input");
  var isValid = true;
  fieldsToValidate.forEach(f => {
    if (f.checkValidity() === false) {
      isValid = false;
    }
  })
  return isValid;
}