Question

我对编码非常陌生并且已经管理（在朋友的帮助下）创建一个表单来定位提交者并将值（+坐标）写入Google表格。我遇到问题的地方在HTML5 REGEX并且需要验证。

当我点击提交按钮时，REGEX和所需的验证弹出窗口会启动，但不幸的是，同时表单数据会提交给Google表格，数据会从表单中清除。< / p>

我无法弄清楚如何首先进行验证，然后继续提交，而不是同时发生。

提前感谢您的帮助！

code.gs：

function doGet() {
  var html = HtmlService.createTemplateFromFile("test").evaluate()
      .setTitle('Engagement Card')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return html;  
}

function addData(data){
  var ss = SpreadsheetApp.openById('1g*********************OnE').getSheetByName('Sheet1');
  ss.appendRow(data);
}

的test.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
</head>
<body>
    <div id="formdiv">
    <table width="500">
  <tr>
    <td align=center>
        <img src="https://lh5.googleusercontent.com/5PX_VkGEwpy6YfE9mOBP3tSZ-PE6QW_J2AIIGRYtKuA=w231-h207-p-no" alt="" width='200' />
    </td>
    <td colspan=2 align=center>
        <font size=7>Virtual<br><br>Engagement<br><br>Card *Beta*</font>
    </td>
  </tr>
</table>
<table width="500">
  <tr>
    <td colspan=3 align=center>
        <font size=3>Please complete the information below</font>
    </td>
  </tr>
</table>
<form id="form">
<table width="500">
  <tr>
    <td>First Name:</td>
    <td><input type="text" pattern="^[A-Z]+[a-zA-Z]*$" id="first" placeholder="Please type your first name" title="Name must start with a capital letter and not contain punctuation or spaces" required="required" /></td>
  </tr>
  <tr>
    <td colspan=2 align=center><button type="submit" class="action" id="submit">Submit</button></td>
  </tr>    
</table>
</form>

</div>

<script>
$('#submit').click(function getLocation() {//when the submit button is clicked run this function (getLocation)
    if (navigator.geolocation) {//if the browser supports geolocation then...
        navigator.geolocation.getCurrentPosition(getData);//get the current position and pass the values to function getData
    } else {//if the browser does not support geolocation then...
        $('#formdiv').append("Geolocation is not supported by this browser.");//append this message in the web interface
    }
});

function getData(position) {//starts the getData function and names data passed to it by getLocation as "position"
    console.log(position);//logs the data passed by getLocation in the JS log for viewing
    console.log('Running getData');//logs the words "Running getData" in the JS log
    var latitude = position.coords.latitude;//assigns the latitude value from geolocation to var latitude
    var longitude = position.coords.longitude;//assigns the longitude value from geolocation to var longitude
    var coords = [latitude, longitude];//combines latitude and longitude into an array named var coords
    var data1 = $('#first').val();//gets the values from the inputs using the input id

    var data = [data1,latitude,longitude];//combines data elements in an array named var data


   console.log(data);//logs the data values in the JS log for viewing

   google.script.run.addData(data);//runs the function in the code.gs file

   console.log('Data transmitted');//logs the words "Data transmitted" in the JS log

        var field1= document.getElementById('first');            

        field1.value= field1.defaultValue;

};



</script>

更新20DEC 1430EST：我使用@ user9090的建议更改了getLocation以提交（与点击相关）并添加了一些控制台日志。更改为.submit允许验证和必填字段完成他们正在寻找的工作。但是，现在脚本在getLocation中停止。 “浏览器支持地理位置”在控制台中记录，但随后屏幕变白。我相信getData不再运行了。有什么想法吗？

$('#form').submit(function getLocation() {//when the submit button is clicked run this function (getLocation)
    console.log('getting location');
    if (navigator.geolocation) {//if the browser supports geolocation then...
    console.log('browser supports geolocation');
        navigator.geolocation.getCurrentPosition(getData);//get the current position and pass the values to function getData
    } else {//if the browser does not support geolocation then...
    console.log('browser does not support geolocation');
        $('#formdiv').append("Geolocation is not supported by this browser.");//append this message in the web interface
    }
});

function getData(position) {//starts the getData function and names data passed to it by getLocation as "position"
    console.log(position);//logs the data passed by getLocation in the JS log for viewing
    console.log('Running getData');//logs the words "Running getData" in the JS log

更新20DEC 1620EST：原来，脚本现在运行正常，并验证。我的最后一条评论是唯一的，因为存在验证错误。如果我完成了遵循正则表达式和必需元素的表单，那么数据提交就好了。虽然，如果我有验证错误，在纠正错误并再次按下提交按钮后，脚本会在getLocation中挂起...

Answer 1

使用以下代码行

更改脚本块中的前7行（在test.html中）

 $("#form").submit(function(event) {
  console.log("Submitting form....");
  google.script.run.withSuccessHandler(function(e){

  // Do you validation here

  }).addData(this);  // this is a form's data passed to your GAS function
 });

Apps脚本中的HTML表单验证

code.gs：

的test.html

1 个答案: