Как я могу добавить проверку к форме во внешнем интерфейсе HTML в Google Apps Script?

ProgramBox

Как я могу добавить проверку к форме во внешнем интерфейсе HTML в Google Apps Script?

Post author:admin
Запись опубликована:8 марта, 2023
Post category:Вопросы по программированию

#javascript #html #google-apps-script #google-sheets

#javascript #HTML #google-apps-script #google-sheets

Вопрос:

У меня есть эта функция для проверки входных данных в HTML-форме (это боковая панель в Google Таблицах):

Зачет Чикагским компьютерам

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

И затем я вызываю эту функцию с помощью оператора IF перед добавлением данных обратно в мою электронную таблицу.

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

1. Я не могу понять взаимосвязь между вашим скриптом и It's not working. The drop down menu fails to load the options and the data in the form doesn't get added when the button is clicked. . В вашей ситуации validate() всегда false ?

2. Пожалуйста, поделитесь формой HTML, чтобы понять вышеупомянутую взаимосвязь. Кроме того, я считаю, что если данные в поле select ввода не заполняются validate() , функция не может работать должным образом. Таким образом, проблема может быть найдена в раскрывающемся списке creation.

3. Ваш код отлично работает в моей среде. Я полагаю, что проблема заключается в вашей серверной среде. Пожалуйста, покажите, как вы возвращаете options элементы в SuccessHandler

4. @Alessandro Спасибо за ваш ответ! Я только что добавил две функции, запущенные в серверной части. Может ли это быть Array.prototype.every.call() метод, который не поддерживается в GAS?

5. Это поддерживается. См. раздел просмотр> выполнение> очистить фильтр «Запуск от имени меня» вверху слева

Ответ №1:

Я тоже следил за серией видеороликов Chicago Computers Classes и столкнулся с той же проблемой.

К сожалению, я не могу объяснить, почему функция 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;
}