使用Html服务进行HTML5表单验证

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.

我正在尝试使用Google Apps脚本HTML服务时使用HTML5表单验证。正如另一位用户所说，根据文档示例，您必须使用按钮输入而不是提交输入。使用提交按钮似乎进行验证，但无论如何都要调用服务器功能。给予该用户的答案对我不起作用。此外，我想在提交表单时调用两个函数，这可能会使它更复杂。

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)?

这就是我要做的事情：用户填写表格并生成Google Doc并给他提供网址。当他点击提交按钮时，我向他展示了一个jQuery UI对话框，上面写着“正在创建您的文档”，并带有一个漂亮的微调器。然后，当生成文档时，我给他链接。我使用成功处理程序在Google Doc内容完成时显示结果，但同时我需要一个函数来显示微调器。我不知道是否有更好的方法可以做到这一点，而不是在onclick事件中添加另一个函数，也许它可能会以某种方式破坏进程。如果表单无效（使用HTML5验证），有没有办法不调用任何这些函数？

This is a simplified version of my code:

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

Code.gs

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

Page.html

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.

所有三个HTML文档都使用文档中建议的include函数连接在一起（并使用其各自的标记）。

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

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

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.

非常感谢你提前。

1 个解决方案

#1

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.

请注意，this.parentNode被移除到函数调用的arg中，并且只在函数参数中使用它，因为函数是从

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.

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

#1