Google Apps Script HTML 服務中的 HTML5 表單驗證和文件上傳

Question

我正在使用 HTML 服務開發 GAS，但現在遇到了障礙。 我想做的是

1. 創建一個可以將表單元素（即姓名和電子郵件）中的數據添加到 Google Sheet 的 from
2. 該表單還將文件上傳到特定的谷歌驅動器
3. 在 1 和 2 之前，表單應該基於 HTML5 驗證輸入

這是我的（幾乎）工作代碼：

代碼.gs

function doGet(e) {
    return HtmlService.createHtmlOutputFromFile('index.html');
}

function uploadFiles(form) {
    try {
    var ssID = '-------ssID-------';
    var dropboxID = '-------DriveID-------';
    var folder = DocsList.getFolderById(dropboxID);

    var blob = form.myFile;    

    if ( Boolean(blob) ) {
        var file = folder.createFile(blob);
        file.setDescription("Uploaded by " + form.myName);
    }

var sheet = SpreadsheetApp.openById(ssID).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 3).setValues([[ form.myName, form.myMail, file.getUrl() ]]);
return "File uploaded successfully"+ file.getUrl() + file.getName();

    } catch (error) {
        return error.name + ' on line: ' + error.lineNumber + ' -> ' + error.message;
    }
}

索引.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- You can also include your own CSS styles -->
<style>
    form { margin: 40px auto; }
    input { display:block; margin: 20px; }
</style>

<!-- This is the actual HTML form -->
<!--form id="myForm" onsubmit="runGAS(this)"-->
<form id="myForm" onsubmit="return google.script.run
    .withSuccessHandler(fileUploaded)
    .uploadFiles(this.parentNode);">

    <!-- Text input fields -->
    <input type="text" name="myName" id="myName" placeholder="Your name.." required />
    <input type="email" name="myMail" id="myMail" placeholder="Your mail.." required />
    <!-- File input filed -->
    <input type="file" name="myFile" id="myFile" required />
    <!-- The submit button. It calls the server side function uploadfiles() on click -->
    <input type="submit" value="run onClick" 
           onclick="this.value='Uploading..';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">
    <input type="submit" value="Run GAS Function">
</form>
<script>

function runGAS( argThis ) {
    var n = $( "#myName" ).val();
    var f = document.getElementById("myFile");
    // var g = $( "myFile" ).val();
    if( Boolean(n) ) {
        document.getElementById('output').innerHTML = "OK" + n + "js: " + f;
        google.script.run.withSuccessHandler(fileUploaded)
        .uploadFiles( argThis );
        document.getElementById('output').innerHTML = e.name + 'on line:' + e.lineNumber + '->' + e.message;
    }
    return false;
}

</script>

<!-- Here the results of the form submission will be displayed -->
<div id="output"></div>

<!-- The function will be called after the Google Script has executed -->
<script>
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
</script>

我遇到了很多建議：

1. 許多不會處理文件上傳（僅工作表）的教程會說直接從提交按鈕調用，這繞過了 HTML5 驗證。 這是我的第一個提交按鈕名稱“run onClick”的示例。
2. 經過搜索，我發現要觸發HTML5驗證（這里是HTML5表單驗證與Html Service的鏈接），另一個標題為“run onClick”的提交按鈕的情況，我們應該將GAS函數調用移動到form元素，這樣做有助於觸發HTML5驗證，但奇怪的事情發生在 GAS 上，因為它不會，並且 URL 生成帶有表單值的典型GET （例如， https://script.google.com/a/macros/----/s/---------/dev?myName=va&myMail=vas%40au.edu&myFile=imgName.jpg )
3. 另一種解決方案，有人建議我們可以使用jQuery來捕獲表單提交，只有在滿足所有要求（驗證）時才觸發GAS函數調用。 這給了我與 2. 相同的結果。 GAS 運行，但沒有傳遞任何實際值就返回到此頁面。

任何解決方案將不勝感激。

編輯 12/19/2014

<script>
window.runGAS = function() {
  // jQuery Style
  window.form = $( "#myForm" );
  // OR JS 
  window.form = document.getElementById('myForm');

  google.script.run
  .withSuccessHandler(fileUploaded)
  .uploadFiles(form);
  return false;
}
</script>

我嘗試了 Sandy 的建議，在表單元素的函數調用onsubmit中省略傳遞值。 這有助於觸發 HTML5 驗證。 我想我必須找到將表單對象（而不是單個表單值）傳遞給code.gs ，所以我通過 GAS 函數運行傳遞表單對象。

如果我使用 jQuery 樣式，JavaScript 控制台會報告Untaming of guest constructed objects unsupported: [object Object] 。

如果我使用getElementById ，我會遇到同樣的問題，它生成帶有一對 name=value 的 GET 樣式 URL 並返回 index.html 而不“執行” code.gs函數。 請注意，它“似乎”以某種方式通過code.gs （即，如果我放置了一些語法錯誤，它會在此過程中報告）但它只是沒有像onclick那樣做它應該做的事情。

到目前為止，這將起作用的唯一方法是使用onclick ，而不是onsubmit ，而不是從標簽調用中間 GAS。 但它繞過了 HTML5 驗證。

我真的不知道這里...

Answer 1

以下是我使用 HTML 服務配置 FORM 的方法：

<form id="myInputForm" name="input" onsubmit="writeInput()">

我沒有在表單中運行onsubmit="return google.script.run 。我想我遇到了與您相同或類似的問題。因此，表單在提交表單時運行 JavaScript 函數writeInput() . 然后 SCRIPT 標簽中的 JavaScript 函數運行google.script.run 。這對我google.script.run 。當我這樣設置時，具有必填設置的輸入字段將阻止提交表單。

<script>
  window.writeInput = function() {
    window.myInputValue = document.getElementById('idMyInputID').value; //Get input value
    google.script.run
  }
<script>

你應該對前端和后端兩種數據驗證。 黑客也許能夠找到某種方式將他們自己的數據發送到.gs ，即服務器端代碼。 如果我選擇在前面，客戶端，或后端，服務器端驗證要么，我會與服務器端驗證去。 如果他們的數據輸入錯誤，就快速將 msg 返回給用戶，客戶端檢查更好，但它並不更安全。

您實際上是在問一個關於個人偏好或意見問題的問題。 我只是在 HTML 中使用 JavaScript 從輸入字段中獲取值。

window.variableName = document.getElementById('id_Name').value;

這行代碼從表單輸入字段中獲取值，並放入一個變量中。 然后您可以將變量發送到.gs文件。

google.script.run.withFailureHandler(onFailure)
      .withSuccessHandler(savedLst)
      .writeInputData(variableName);

上面的代碼在 HTML 中。 函數writeInputData位於.gs腳本文件中。

您可以在調用writeInputData函數之前檢查變量variableName以進行驗證。

if (variableName === "") {
  alert("Missing Input");
  return false;
} else {
  google.script.run.withFailureHandler(onFailure)
    .withSuccessHandler(savedLst)
    .writeInputData(variableName);
};

還有其他方法可以進行前端數據驗證。 您可以組合方法。 如果您發現無法修復的錯誤，請發布錯誤消息以及它來自哪一行。

要從 HTML 打印信息，請使用： console.log("some text here: " + variableName); 這將在瀏覽器的控制台上打印一些內容。 打開開發人員工具和控制台以查看已打印到瀏覽器控制台的內容。 不要與Logger.log()混淆，后者將某些內容打印到服務器端 Apps 腳本日志。