HTML <input> 必需属性无法阻止表单在 Apps 脚本应用程序中提交

Question

我正在测试我在 Google Apps 脚本中编写的一些代码。我已经要求我的字段有文本，但是当我用空字段测试它时，服务器端代码无论如何都是运行。该代码触发弹出窗口，指出字段是必需的，但在弹出窗口上单击 "OK" 时提交表单。我已经在填写所有字段然后提交完美上传的地方对其进行了测试。我想我只是把我的编码倒退了或者在我的 "onclick" 里。我有编码的基本知识，所以如果这是一个愚蠢的问题，我很抱歉。谢谢，谢谢，先谢谢了。

<p>
<form id="myForm">
  <h1>NHD Paper Upload</h1>
  <label>Name</label>
  <input type="text" name="myName" class="required" placeholder="Enter your full name..">
  <label>Division</label>
  <input type="text" name="myDivision" class="required" placeholder="(ex. Junior or Senior)">
  <label>School</label>
  <input type="text" name="mySchool" class="required" placeholder="Enter your school..">
  <label>Affiliate</label>
  <input type="text" name="myAffiliate" class="required" placeholder="Enter your affiliate..">
  <label>Select file to upload. Make sure your file is labeled in the following manner <b>LastName_Division_School_State.pdf</b></label>
  <input type="file" name="myFile">
  <input type="submit" value="Submit File" 
       onclick="validateForm();
                this.value='Please be patient while your paper is uploading..';
                google.script.run.withSuccessHandler(fileUploaded)
                .uploadFiles(this.parentNode);
                return false;">
  <br />
  <label><b>Once upload is successful please stay on this window to copy and paste the URL produced on the next screen into registration.</b></label>
   <br />
  <label><b>If you have any issues or questions please send an email to <a href="mailto:elaine@nhd.org">elaine@nhd.org</a>.</b></label>
</form>

</p>

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

<script>
    function validateForm() {
    var x=document.getElementsByClassName('required');
    for(var i = 0; i <x.length; i++){
       if (x[i].value == null || x[i].value == "")
       {
          alert("All fields must be filled out.");
          return false;
          }
       }
    }
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }

</script>

<style>
 input { display:block; margin: 15px; }
 p {margin-left:20px;}
</style>

这里是 javascript

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

function uploadFiles(form) {

  try {

    var dropbox = "NHD Papers";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }

    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName + ", Division: " + form.myDivision + ", School: " + form.mySchool + ", State: " + form.myState);

    return "<h2>File uploaded successfully!</h2><p>Copy and paste the following URL into registration:<br /><br /><strong>" + file.getUrl() + '</strong></p>';

  } catch (error) {

    return error.toString();
  }

}

Answer 1

现在，直接从提交按钮调用 google.script.run。

当前设置：

<input type="submit" value="Submit File" 
   onclick="validateForm();
            this.value='Please be patient while your paper is uploading..';
            google.script.run.withSuccessHandler(fileUploaded)
            .uploadFiles(this.parentNode);
            return false;">

如果你想在必填输入字段未填写时防止 google.script.run 变为运行，我会尝试运行从 <form> 标签提交事件。

<form id="myForm" onsubmit="validateForm();
            this.value='Please be patient while your paper is uploading..';
            google.script.run.withSuccessHandler(fileUploaded)
            .uploadFiles(this);
            return false;">

确保将 this.parentNode 更改为 this，以便使用此设置。

作为个人喜好，我喜欢把google.script.run它自己的功能。您已经为 validateForm() 使用了单独的函数，您可以将 google.script.run 放入该函数中：

将表单标签简化为：

<form id="myForm" onsubmit="validateForm()">

脚本

function validateForm() {
  var x=document.getElementsByClassName('required');
  for(var i = 0; i <x.length; i++){
    if (x[i].value == null || x[i].value == "")
    {
      alert("All fields must be filled out.");
      return false;
     }
      this.value='Please be patient while your paper is uploading..';
      var myFormObject = document.getElementById('myForm');
      google.script.run.withSuccessHandler(fileUploaded)
        .uploadFiles(myFormObject);

   }
}

由于函数在表格之外，您不能再使用 this.parentNode。通过您的 ID 获取表格。示例代码中显示了一种选择。

HTML <input> 必需属性无法阻止表单在 Apps 脚本应用程序中提交

HTML <input> Required Attribute Fails to Prevent Form from Submitting in Apps Script App

html

javascript

validation

google-apps-script

当前设置：