我已经搜索了很长一段时间，并尝试对我的代码进行了多次更改，但似乎找不到具体问题的答案。
我想做的事情:我创建了一个网页地理编码器，它接受一个地址，对其进行地理编码，允许用户操作 map 标记，然后将其保存到数据库中。
问题:单击提交按钮时会调用 validateForm() 函数，并且在填充所有文本框或用户尝试完成表单时工作正常，但如果单击提交按钮则不会检查字段在页面上的任何其他内容发生更改之前单击。我希望使其正常工作，以便用户无法提交空白页面。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geocoding service</title>
<style type="text/css">
a.normal:link {text-decoration:none;}
p.rightcol {padding-left:1400px}
div.header {
padding: 0.5em;
color: blue;
background-color: #D0F5A9;
clear: left;
}
div.footer {
padding: 0.5em;
color: white;
background-color: #31B404;
clear: left;
}
html, body, #map-canvas {
height: 100%;
margin: 1px;
}
#panel {
width: 350px;
font-family: Arial, sans-serif;
font-size: 13px;
float: right;
margin: 10px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var geocoder;
var map;
var markers = [];
var drag = false;
var latLong;
var primeMarker;
var newlat
var newlon
//Creates geocoder and map.
function initialize() {
geocoder = new google.maps.Geocoder();
var mid = new google.maps.LatLng(45.4214, -75.6919);
var mapOptions = {
zoom: 12,
center: mid
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
//Geocodes address provided by user and displays Lat/Long and Full Address.
function codeAddress() {
address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (markers.length > 1) {
alert('You have already Geocoded an address.')
return;
}
if (status == google.maps.GeocoderStatus.OK) {
if (results.length > 1) {
document.getElementById("Multi").innerHTML = "Multiple matches of that address, please select the best match from the list below.";
removeOptions(document.getElementById("myList"));
var opt = document.createElement("option");
var select = document.getElementById("myList");
opt.text = "Please Choose Address";
opt.value = '';
select.options[0] = new Option(opt.text,opt.value);
for (var i = 0; i < results.length-1;i++) {
opt.text = results[i].formatted_address;
opt.value = results[i].formatted_address;
select.options[select.options.length] = new Option(opt.text,opt.value);
}
}
else {
removeOptions(document.getElementById("myList"));
document.getElementById("Multi").innerHTML = "";
map.setCenter(results[0].geometry.location);
map.setZoom(17);
latLong = results[0].geometry.location;
var addy = results[0].formatted_address;
var addy2 = addy.toString();
document.getElementById("fmtAddress").value=addy2;
marker = addMarker(results[0].geometry.location, drag);
document.getElementById("latbox").value = primeMarker.getPosition().lat();
document.getElementById("lngbox").value = primeMarker.getPosition().lng();
}
}
else if( document.getElementById('address').value == "" || document.getElementById('address').value == null) {
alert('Address box is emtpy, cannot geocode a blank address. Please fill in your address.');
}
else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
// Add a marker to the map.
function addMarker(location, drag) {
marker = new google.maps.Marker({
position: location,
map: map,
draggable: drag
});
primeMarker = marker;
markers.push(marker);
}
// Allows the user to edit the position of the marker.
function moveMarker() {
if (markers.length == 0) {
alert('There is no marker to edit. Please insert address and click "Geocode" to produce a marker.');
}
else {
drag = true;
clearMarkers();
addMarker(latLong, drag);
google.maps.event.addListener(primeMarker, 'dragend', function (event) {
newlat = this.getPosition().lat();
newlon = this.getPosition().lng();
document.getElementById("latbox").value = newlat;
document.getElementById("lngbox").value = newlon;
});
}
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setAllMap(null);
}
// Remove all items in listbox
function removeOptions(selectbox) {
var i;
for(i=selectbox.options.length-1;i>=0;i--){
selectbox.remove(i);
}
}
// Gets full address from list and sends it to codeAddress()
function newAddress() {
var x = document.getElementById("myList").selectedIndex;
document.getElementById("address").value = document.getElementById("myList").options[x].text;
codeAddress();
}
// Disables draggable marker and checks that values to be sent to database aren't empty
function validateForm() {
primeMarker.setDraggable(false);
var w = document.forms["myForm"]["address"].value;
var x = document.forms["myForm"]["addy"].value;
var y = document.forms["myForm"]["lat"].value;
var z = document.forms["myForm"]["lng"].value;
if (x==null || x=="" || w==null || w=="") {
alert("The address text box is empty. You might not have entered an address and clicked the 'Geocode' button.");
return false;
}
else if (y==null || y=="" || z==null || z=="") {
alert("The latitude and longitude text box is empty. You might not have entered an address and clicked the 'Geocode' button.");
return false;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="document.myForm.reset();">
<div class="header">
<img src="grey_logo.png" height="10%" width="10%"/>
<h1 class="header" align="center" ><font face="arial" color="black">Web-Based Geocoder Service</font></h1>
<p class="rightcol"><a class="normal" href="https://geo.grey.ca/LaunchPage/"> Grey County GIS </a></br>
<a class="normal" href="http://swiftnetwork.ca/">SWIFT Network Survey</a>
</p>
</div>
<div id="panel">
<form name="myForm" action="Update.asp" onsubmit="return validateForm()" method="post" >
<b>Enter Address To Be Geocoded:</b>
<input id="address" type="textbox" size="50" name="address">
<input type="button" value="Geocode" onclick="codeAddress()"></br></br>
<p id="Multi"></p>
<b>List of Address Options:</b>
<select id="myList" style="width: 330px;" onchange="newAddress()"-->
<option>List of possible addresses...</option>
</select></br></br>
<b>Full Formatted Address:</b>
<p><input size="50" type="text" id="fmtAddress" name="addy" ></p>
<p><b>Latitude:</b> <input size="20" type="text" id="latbox" name="lat" ></p>
<p><b>Longitude:</b> <input size="20" type="text" id="lngbox" name="lng" ></p>
<b>Edit Marker Location</b></br>
<input type="button" value="Edit Marker" onclick="moveMarker()"></br></br>
<b>Save New Location</b></br>
<button type="submit" value="submit" >Save</button>
</form>
</div>
<div id="map-canvas"></div>
<div class="footer" align="center">COPYRIGHT 2015 GREY COUNTY GIS. ALL RIGHTS RESERVED</div>
</body>
</html>
最佳答案
验证函数本身按预期工作 (jsFiddle here) .
我必须从示例中删除 primeMarker.setDraggable(false); 行，因为我从未调用过该函数 - 我认为这也发生在您身上。 primeMarker 在 addMarker 函数中设置为一个对象，当用户提交表单的地理编码部分时调用该函数。如果用户在未进行地理编码的情况下提交，则会出错，因为 primeMarker 为空。
因此，在该行之前添加一个简单的检查以确保它已定义(您可能应该检查它是否实际上是一个 Marker 对象，但这就足够了):
function validateForm() {
if (typeof primeMarker != 'undefined')
primeMarker.setDraggable(false)
[ ... ]
关于JavaScript/HTML onSubmit ="return Validation()"问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30699035/