HTML5表单验证与Html服务 [英] HTML5 form validation with Html Service

问题描述

我正在尝试使用Google Apps Script HTML Service时使用HTML5表单验证。由于另一位用户问，根据到文档示例，您必须使用按钮输入提交输入。使用提交按钮似乎做了验证，但服务器功能仍然被调用。给予该用户的答案对我而言并不适用。另外，我想在提交表单时调用两个函数，这可以使它更复杂。

这就是我想要做的：用户填充表单我生成一个谷歌文件，并给他的网址。当他点击提交按钮时，我向他展示了一个jQuery UI对话框，其中包含一个不错的微调器，用于说明您的文档正在创建。然后，当文件生成时，我给他链接。我使用成功处理程序在Google Doc的内容完成时显示结果，但同时我需要一个显示微调的功能。我不知道是否有更好的方法可以做到这一点，而不是将另一个函数添加到onclick事件中，并且可能会以某种方式破坏进程。如果表单无效（使用HTML5验证），有没有办法调用这些函数？

这是我的代码的简化版本：

Code.gs

  function generateDocument（formObject）{
 var doc = DocumentApp.create（文档名称）; 
 ... 
 return doc.getUrl（）; 
} 
  

Page.html

 <主> 
< form id =myForm> 
 ... 
< input type =buttonvalue =生成文档
 onclick =showProgress（）; 
 google.script.run 
。 withSuccessHandler（openDocument）
 .generateDocument（this.parentNode）;/> 
< / form> 
< div id =dialog-confirmtitle =您的文件> 
< div id =dialog-confirm-text>< / div> 
< / div> 
  

Javascript.html

  $（＃dialog-confirm）.dialog（{autoOpen：false，resizable：false，modal：true}）; 
 $ b $函数showProgress（）{
 $（＃dialog-confirm）.dialog（{buttons：[{text：Cancel，click：function（）{$（this） .dialog（close）;}}]}）; 
 $（＃dialog-confirm）.dialog（open）; 
 $（＃dialog-confirm-text）.html（< br />等待一秒钟，您的文档正在生成...< br />< br />< ; img src ='http：//i.stack.imgur.com/FhHRx.gif'alt ='Spinner'>< / img>）; 
返回false; $ {
} 
 
函数openDocument（url）{
 $（＃dialog-confirm）.dialog（{autoOpen：false，resizable：false，width：400，buttons： [{text：Ok，click：function（）{$（this）.dialog（close）;}}]}）; 
 $（＃dialog-confirm-text）.html（'< br />< a href ='+ url +'target =_ blank>点击此处打开并打印您的文档！< / a>'）; 
返回false; 
} 
  

所有三个HTML文档都连接在一起（并使用各自的标签）包含函数按照文档中的建议。

我是jQuery的新手，欢迎任何建议。

最后一个问题：该对话框将关闭它，但不会停止正在创建的文档。是否有可能停止这个过程？我不这么认为。

非常感谢您提前。

解决方案

将函数调用移至< form> 元素;从提交输入元素中删除任何函数调用;并将中间JavaScript代码放入< script> 标记中：

  < input tabindex =9type =submitvalue =Save Inputid ='idInputBtn'> 
 
 
 
 
< script> 
 window.fncWriteInput = function（argTheInfo）{
 //如果您需要
 var everythingIsOk =，请在此执行额外的检查。 。 。 。 。 。 。 ; 
 
 if（everythingIsOk）{
 google.script.run 
 .withSuccessHandler（openDocument）
 .generateDocument（argTheInfo）; 
}; 
}; 
  

请注意， this.parentNode 被移除函数调用的arg，并且只需在函数参数中使用 this ，因为该函数是从< form>


如果有任何错误，表单将不会被提交，并且用户将得到一个msg，说明有问题。没有代码会运行。

这是伪代码，但我在应用程序中使用了这样的设置。但是使用开发人员工具，您可以在浏览器中直接插入一个断点，然后遍历每行来测试它，而无需放入 console.log 语句。

I'm trying to use HTML5 form validation when using Google Apps Script HTML Service. As another user asked, according to the documentation example, you must use a button input instead of a submit input. Using a submit button seems to do the validation, but the server function is called anyway. The answer given to that user didn't work for me. Also, I want to call two functions when submitting the form and this can make it more complex.

This is what I'm trying to do: The user fills a form and I generate a Google Doc and give him the url. When he clicks the submit button, I show him a jQuery UI dialog saying "Your document is being created" with a nice spinner. Then, when the document is generated, I give him the link. I use the success handler to show the result when the Google Doc stuff is finished, but meanwhile I need a function to show the spinner. I don't know if there is a better way to do that than adding another function to the onclick event and maybe it can be damaging the process in some way. Is there a way not to call any of these functions if the form is not valid (using HTML5 validation)?

This is a simplified version of my code:

Code.gs

function generateDocument(formObject) {
  var doc = DocumentApp.create("Document name");
  ...
  return doc.getUrl();
}

Page.html

<main>
  <form id="myForm">
    ...
    <input type="button" value="Generate document" 
        onclick="showProgress();
            google.script.run
            .withSuccessHandler(openDocument)
            .generateDocument(this.parentNode);"/>
  </form>
  <div id="dialog-confirm" title="Your document">
    <div id="dialog-confirm-text"></div>
  </div>

Javascript.html

$( "#dialog-confirm" ).dialog({ autoOpen: false, resizable: false, modal: true });

function showProgress() {
  $( "#dialog-confirm" ).dialog({ buttons: [ { text: "Cancel", click: function() { $( this ).dialog( "close" ); } } ] });
  $( "#dialog-confirm" ).dialog( "open" );
  $( "#dialog-confirm-text" ).html( "<br />Wait a second, your document is being generated...<br /><br /><img src='http://i.stack.imgur.com/FhHRx.gif' alt='Spinner'></img>" );
  return false;
}

function openDocument(url) {
  $( "#dialog-confirm" ).dialog({ autoOpen: false, resizable: false, width: 400, buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] });
  $( "#dialog-confirm-text" ).html( '<br /><a href="' + url + '" target="_blank">Click here to open and print your document!</a>' );
  return false;
}

All three HTML docs are joined together (and working with its respective tags) with the include function as recommended in the documentation.

I'm new at jQuery, any advice will be welcome.

A last question: the Cancel button in the dialog will close it but won't stop the doc being created. Is it possible to stop this process? I don't think so.

Thank you very much in advance.

解决方案

Move the function call to the <form> element; remove any function call from the submit input element; and put intermediary JavaScript code into a <script> tag:

<input tabindex="9" type="submit" value="Save Input" id='idInputBtn'>


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

<script>
  window.fncWriteInput= function(argTheInfo) {
  // Do additional checks here if you want
  var everythingIsOk = . . . . . . . ;

  if (everythingIsOk) {
    google.script.run
      .withSuccessHandler(openDocument)
      .generateDocument(argTheInfo);
    };
  };

Notice that this.parentNode gets removed to the arg of the function call, and just use this in the function argument because the function is getting called from the <form> element, which is the parent.

If there are any errors, the form will not be submitted, and the user will get a msg that something was wrong. No code will run.

This is pseudo code, but I do use a set up like this in my application. But use developer tools and you can put a break point right in your browser and step through every line to test it without needing to put in console.log statements.

这篇关于HTML5表单验证与Html服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！