表单输入字段中的表单“必需”属性不会导致任何事情发生

Question

我是来自意大利的安德鲁， 我正在尝试改编我在网上找到的脚本。这是一个创建 HTML 表单并在电子表格中上传答案的脚本。

这是我开始的教程：

GS 代码：

var dropBoxId = "XXXXXXXXXXXXXXXX"; // Drive ID of 'dropbox' folder
var logSheetId = "XXXXXXXXXXXXXXXXX"; // Drive ID of log spreadsheet

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

function uploadFiles(formObject) {
try {
// Create a file in Drive from the one provided in the form
var folder = DriveApp.getFolderById(dropBoxId);
var blob = formObject.myFile;    
var file = folder.createFile(blob);    
file.setDescription("Uploaded by " + formObject.myName);

// Open the log and record the new file name, URL and name from form
var ss = SpreadsheetApp.openById(logSheetId);
var sheet = ss.getSheets()[0];
sheet.appendRow([file.getName(), file.getUrl(), formObject.myName, formObject.email]);

// Return the new file Drive URL so it can be put in the web app output
return file.getUrl();
} catch (error) {
return error.toString();
}
}

HTML 代码：

<form id="myForm">
  <input type="text" name="myName" placeholder="insert your name"/>
  <input type="email" name="email" autocomplete="on" placeholder="mail ">
  <input name="myFile" type="file" />
  <input type="button" value="send"
      onclick="google.script.run
          .withSuccessHandler(updateUrl)
          .withFailureHandler(onFailure)
          .uploadFiles(this.parentNode)" />
</form>

<div id="output"></div>

<script>
    function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">All done</a>';
    }
    function onFailure(error) {
        alert(error.message);
    }
</script>

<style>
  input { display:block; margin: 20px; }
</style>

我想让一些字段成为必填项。

我试过了

<input type="text" name="myName" required>

但什么也没发生。

我能做什么？有没有简单的解决办法？

谢谢！！ 安德烈亚

编辑 经过一些建议后，我更新了 HTML 代码：

新的 HTML 代码：

<form id="myForm" onsubmit="google.script.run
          .withSuccessHandler(updateUrl)
          .withFailureHandler(onFailure)
          .uploadFiles(this)">

  <input type="text" name="myName" placeholder="insert your name" required />
  <input type="email" name="email" autocomplete="on" placeholder="mail ">
  <input name="myFile" type="file" />
  <input type="submit" value="send"/>

</form>

<div id="output"></div>

<script>
    function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">All done</a>';
    }
    function onFailure(error) {
        alert(error.message);
    }
</script>

<style>
  input { display:block; margin: 20px; }
</style>

现在，如果我不上传任何文件，所需的功能将正常工作并且电子表格会更新。如果我在单击按钮时附加文件，页面刷新和脚本的链接会以这种方式更改：

https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXXXXXX/dev?myName=FirstName&email=mymail%40mail.com&myFile=File1.txt

我已经通过这种方式在GS代码中添加了一些Logger.log：

var dropBoxId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; // Drive ID of 'dropbox' folder
var logSheetId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; // Drive ID of log spreadsheet
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(formObject) {
try {
// Create a file in Drive from the one provided in the form
var folder = DriveApp.getFolderById(dropBoxId);
var blob = formObject.myFile;    
var file = folder.createFile(blob);    
file.setDescription("Uploaded by " + formObject.myName);
  Logger.log('blob : ' + blob)
  Logger.log('myName : ' + formObject.myName)

// Open the log and record the new file name, URL and name from form
var ss = SpreadsheetApp.openById(logSheetId);
var sheet = ss.getSheets()[0];
sheet.appendRow([file.getName(), file.getUrl(), formObject.myName, formObject.email]);

// Return the new file Drive URL so it can be put in the web app output
return file.getUrl();
} catch (error) {
return error.toString();
}
}

这是我不上传任何文件时的输出：

[15-05-26 09:33:47:789 CEST] blob : FileUpload
[15-05-26 09:33:47:789 CEST] myName : myFirstName

如果我附加一个文件，日志完全是空白的。

我不明白问题出在哪里。

Answer 1

您使用的代码没有“提交”类型的输入（输入标记显示为提交按钮）。您正在使用的表单中的按钮是“按钮”类型的输入标记。

<input type="button">

required 属性不适用于“按钮”输入类型。它将与“提交”类型的输入标签一起工作。

<input type="submit">

StackOverflow - Difference between button and submit

但是“提交”到底是做什么的呢？ “提交”类型的输入标签会导致执行表单标签中指定的任何操作，或者导致onsubmit 触发：

<form action="urlToInvoke">

提交时：

<form onsubmit="myFunction()">

您的输入表单没有action 或onsubmit 属性：

<form id="myForm">

在您的表单中，google.script.run 函数是从“按钮”类型的输入标签调用的。

当前设置：

  <input type="button" value="send"
  onclick="google.script.run
      .withSuccessHandler(updateUrl)
      .withFailureHandler(onFailure)
      .uploadFiles(this.parentNode)" />

如果您想尝试使 required 功能发挥作用，您可以尝试以下方法：

将输入类型更改为“提交”：

<input type="submit">

将google.script.run 代码放入表单的onsubmit 属性中：

<form id="myForm" onsubmit="google.script.run
      .withSuccessHandler(updateUrl)
      .withFailureHandler(onFailure)
      .uploadFiles(this)">

确保将this.parentNode 更改为this。仅使用 this 关键字单独指代正在使用的任何元素。当从按钮执行 onsubmit 时，按钮是表单的子项。在这种情况下，有必要获取父表单，即表单，以传递给函数，即this.parentNode。