【发布时间】：2014-12-20 04:04:09
【问题描述】：
我对编码非常陌生，并且已经设法（在朋友的帮助下）创建了一个表单，该表单可以对提交者进行地理定位并将值（+坐标）写入 Google 表格。我遇到问题的地方是HTML5 REGEX 和必需的验证。
当我点击提交按钮时，REGEX 和必需的验证弹出窗口启动，但不幸的是，与此同时，表单数据被提交到 Google 表格并从表单中清除数据。
我不知道如何首先进行验证，然后继续提交，而不是同时进行。
提前感谢您的帮助！
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 中......
【问题讨论】：
标签： html regex forms validation google-apps-script