jquery 使用Google Apps脚本的HTML服务验证HTML表单

mfuanj7w 于 2023-02-15 发布在 jQuery

关注(0)|答案(2)|浏览(137)

在使用Google Apps Script的HTML服务时，我尝试使用HTML表单验证。根据文档示例，作为another user asked，您必须使用按钮输入而不是提交输入。使用提交按钮似乎完成了验证，但无论如何都会调用服务器函数。给该用户的答案对我不起作用。此外，我想在提交表单时调用两个函数，这会使它变得更加复杂。
这就是我要做的用户填写一个表单，我生成一个GoogleDoc并给他一个URL。当他点击提交按钮时，我向他显示一个jQuery UI对话框，上面写着"您的文档正在创建中"，并带有一个漂亮的微调器。然后，当文档生成时，我给他一个链接。当GoogleDoc的东西完成时，我使用成功处理程序显示结果。但同时我需要一个函数来显示微调器。我不知道是否有比在onclick事件中添加另一个函数更好的方法来做到这一点，而且可能会在某种程度上破坏进程。有没有一种方法可以在表单无效时不调用这些函数（使用HTML验证）？
这是我的代码的简化版本：
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;
}

所有这三个HTML文档都使用文档中推荐的include函数连接在一起（并使用其各自的标记）。
对话框中的"取消"按钮将关闭对话框，但不会停止正在创建的文档。是否可以停止此过程？

jquery

来源：https://stackoverflow.com/questions/25265107/html-form-validation-with-google-apps-scripts-html-service

2条答案

按热度按时间

vyu0f0g11#

我找到了一个解决方案：

"<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中调用窗口有时会出现问题，这就是我进一步研究这一问题的原因。

赞(0）回复(0）举报 2023-02-15

fcg9iug32#

将函数调用移动到<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被移到函数调用的参数中，只需在函数参数中使用this，因为函数是从<form>元素调用的，该元素是父元素。
如果有任何错误，表单将不会被提交，用户将得到一条出错的消息，没有代码运行。
这是伪代码，但我在我的应用程序中确实使用了这样的设置，但使用开发者工具，你可以在浏览器中放置一个断点，并通过每一行来测试它，而不需要放入console.log语句。

赞(0）回复(0）举报 2023-02-15

我来回答

jquery 使用Google Apps脚本的HTML服务验证HTML表单

2条答案

相关问题

热门标签

最新问答