Question

我一直在寻找相当长的一段时间，并尝试过对我的代码进行了很多修改，但似乎无法专门找到我的问题的答案。

我想要做的是：我创建了一个网页地址解析器，它接收地址，对其进行地理编码，允许用户操作地图管理器，然后将其保存到数据库中。

问题：单击提交按钮时会调用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>

Answer 1

验证功能本身按预期工作(jsFiddle here)。

我不得不从我的示例中移除primeMarker行，因为我从未调用过该函数 - 我认为这也是你发生的事情。 addMarker被设置为primeMarker函数中的对象，当用户提交表单的地理编码部分时调用该对象。如果用户提交时未进行地理编码，则会出错，因为function validateForm() { if (typeof primeMarker != 'undefined') primeMarker.setDraggable(false) [ ... ]只是空的。

所以，在该行之前添加一个简单的检查以确保它被定义（你应该检查它实际上是一个Marker对象，但这就足够了）：

{{1}}

http://jsfiddle.net/daCrosby/56ugez8q/2/

JavaScript / HTML onSubmit =“return Validation（）”问题

1 个答案: