表单输入字段中的表单 "required" 属性不会导致任何事情发生

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>

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

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

您使用的代码没有 "submit" 类型的输入（输入标签显示为提交按钮）。您正在使用的表单中的按钮是 "button".

类型的输入标签

<input type="button">

required 属性将 不适用于 输入类型 "button"。它将与 "submit".

类型的输入标签一起使用

<input type="submit">

Whosebug - Difference between button and submit

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

<form action="urlToInvoke">

提交时：

<form onsubmit="myFunction()">

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

<form id="myForm">

在您的表单中，google.script.run 函数是从类型为 "button" 的输入标记调用的。

当前设置：

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

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

将输入类型更改为"submit":

<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.

表单输入字段中的表单 "required" 属性不会导致任何事情发生

Form "required" attribute in form input field not causing anything to happen

html

google-apps-script

forms

required