HTML<输入>必需的属性无法阻止表单在Apps脚本应用中提交 [英] HTML <input> Required Attribute Fails to Prevent Form from Submitting in Apps Script App

问题描述

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

 < p> 
< form id =myForm> 
< h1> NHD文件上传< / h1> 
< label>名称< / label> 
< input type =textname =myNameclass =requiredplaceholder =输入您的全名..> 
< label>分部< / label> 
< input type =textname =myDivisionclass =requiredplaceholder =（ex。Junior or Senior）> 
< label>学校< / label> 
< input type =textname =mySchoolclass =requiredplaceholder =Enter your your school ..> 
< label>加盟< / label> 
< input type =textname =myAffiliateclass =requiredplaceholder =Enter your affiliate ..> 
< label>选择要上传的文件。确保您的文件按以下方式标记：< b> LastName_Division_School_State.pdf< / b>< / label> 
< input type =filename =myFile> 
< input type =submitvalue =提交文件
 onclick =validateForm（）; 
 this.value ='请耐心等待您的文章正在上传。 
 google.script.run.withSuccessHandler（fileUploaded）
 .uploadFiles（this.parentNode）; 
 return false;> 
< br /> 
< label>< b>上传成功后，请继续在此窗口中将下一个屏幕上制作的网址复制并粘贴到注册中。< / b>< / label> 
< br /> 
< label>< b>如果您有任何问题或疑问，请发送电子邮件至< a href =mailto：[e-mail]> [e-mail]< / a> ;. < / b>< /标签> 
< / form> 
 
< / p> 
 
< div id =output>< / div> 
 
< script> 
函数validateForm（）{
 var x = document.getElementsByClassName（'required'）; 
 for（var i = 0; i< x.length; i ++）{
 if（x [i] .value == null || x [i] .value ==）
 {
 alert（所有字段必须填写。）; 
返回false; 
} 
} 
} 
函数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

 函数doGet（e）{
 return HtmlService.createHtmlOutputFromFile（'form.html'）; 
} 
 
 function uploadFiles（form）{
 
 try {
 
 var dropbox =NHD Papers; 
 var文件夹，文件夹= 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）; 
 $ b $ return< h2>文件上传成功！< / h2>< p>将以下网址复制并粘贴到注册中：< br />< br /><强>中+ file.getUrl（）+'< / strong>< / p>'; 
 
} catch（error）{
 
 return error.toString（）; 
} 
 
} 
  

解决方案

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

当前设置

 < input type =submitvalue =提交文件
 onclick =validateForm（） ; 
 this.value ='请耐心等待您的论文正在上传..'; 
 google.script.run.withSuccessHandler（fileUploaded）
 .uploadFiles（this.parentNode）; 
 return false;> 
  

如果您想防止 google.script.run 在没有填充 required 输入字段时运行，我会尝试从< form> 标记运行提交事件。

 < form id =myFormonsubmit =validateForm（）; 
 this.value ='请; 
 google.script.run.withSuccessHandler（fileUploaded）
 .uploadFiles（this）; 
 return false;> 
  

确保将 this.parentNode 更改为只是这个，用于使用这个设置。

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

简化表单标记为：

 <表单ID =myFormonsubmit =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（所有字段必须填写。）; 
返回false; 
} 
 this.value ='请耐心等待您的文章正在上传。 
 var myFormObject = document.getElementById（'myForm'）; 
 google.script.run.withSuccessHandler（fileUploaded）
 .uploadFiles（myFormObject）; 
 
 
 
 
 
 
由于该函数在表单，你不能再使用 this.parentNode 。通过您的ID获取表格。示例代码中显示了一个选项。
 
I'm testing some code I wrote in Google Apps Script. I've required my fields to have text, but when I test it with null fields, the sever side code is run anyway.  The code fires the pop-up stating that fields are required, but submits the form when clicking "OK" on the pop-up. I've tested it where I've filled out all the fields and then submitted which uploads perfectly. I think I just have my coding backwards or something in my "onclick". I have a basic knowledge of coding so I'm sorry if this is a dumb question. Thank you, thank you, thank you in advance.
<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:[e-mail]">[e-mail]</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>
and here is the 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();
  }

}

解决方案
Right now, google.script.run is being called directly from the submit button.

Current set up:

<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;">
If you want to prevent google.script.run from being run when a required input field is not filled in, I'd try running the submit event from the <form> tag.
<form id="myForm" onsubmit="validateForm();
            this.value='Please be patient while your paper is uploading..';
            google.script.run.withSuccessHandler(fileUploaded)
            .uploadFiles(this);
            return false;">
Make sure to change this.parentNode to just this, for using this set up.

As a personal preference, I like to put google.script.run it's own function.  You are already using a separate function for validateForm(), you could put the google.script.run in that function:

Simplify the form tag to:
<form id="myForm" onsubmit="validateForm()">
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;
     }
      this.value='Please be patient while your paper is uploading..';
      var myFormObject = document.getElementById('myForm');
      google.script.run.withSuccessHandler(fileUploaded)
        .uploadFiles(myFormObject);

   }
}
Since the function is outside of the form, you can't use this.parentNode anymore.  Get the form by your id.  One option is shown in the example code.

                        
这篇关于HTML&lt;输入&gt;必需的属性无法阻止表单在Apps脚本应用中提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！