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

Question

我在使用 Google Apps 脚本 HTML 服务时尝试使用 HTML5 表单验证。如another user asked，根据documentation example，您必须使用按钮输入而不是提交输入。使用提交按钮似乎可以进行验证，但无论如何都会调用服务器函数。给该用户的答案对我不起作用。另外，我想在提交表单时调用两个函数，这会使它变得更复杂。

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

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

代码.gs

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

页面.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;
}

所有三个 HTML 文档都通过包含函数 as recommended in the documentation 连接在一起（并使用其各自的标签）。

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

最后一个问题：对话框中的取消按钮将关闭它，但不会停止创建文档。是否可以停止此过程？我不这么认为。

非常感谢您。

Answer 1

我知道这个答案已经很久了，但我找到了一个简单的解决方案：

"<input type='submit' onclick='if(verifyForm(this.parentNode)===true){google.script.run.withSuccessHandler(YOUROUTPUT).YOURFUNCTION(this.parentNode); return false;}' value='Submit'></form>";

Javascript 方面

 function verifyForm(){
  var elements = document.getElementById("myForm").elements;
  for (var i = 0, element; element = elements[i++];) {
    if (element.hasAttribute("required") && element.value === ""){
      resetInputs();
      return false;
    }
    if (element.hasAttribute("pattern")){
      var value = element.value;
      if(value.match(element.pattern)){
      }else{
        resetInputs();
        return false;
      }
    }
   }
   return true;
}

在 iOS 中调用窗口有时会出现问题，这就是我进一步调查的原因。

Answer 2

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

<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);
    };
  };

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

如果有任何错误，表单将不会被提交，并且用户会收到一条错误消息。不会运行任何代码。

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