如何验证我的谷歌地图搜索文本框是否存在无效输入

How can I validate my google map search text box for invalid input?

本文关键字:文本 图搜索 是否 存在 输入 无效 地图 谷歌 何验证 验证 我的      更新时间:2023-09-26

这是我关于stackoverflow的第一个问题,希望我能得到大量的答案;)

我已经集成了谷歌地图 API 来自动完成我的搜索地点文本框,并在我的旅行规划应用程序上的同一页面上在地图上显示所选地点。

我想要实现的目标 - 如果用户在搜索文本框中输入无效值,则不应提交表单。

我在做什么 - 我正在使用 jquery 验证插件来验证表单上的其他元素。在提交处理程序中,我调用了一个函数来验证搜索文本框。这是函数:

function validateMapSearchInput(searchBoxID)
 {
     var addressField = document.getElementById(searchBoxID);
     var geocoder = new google.maps.Geocoder();
     var search = geocoder.geocode(
                  {'address': addressField.value}, 
                    function(results, status) { 
                       if (status == google.maps.GeocoderStatus.OK) 
                       { 
                           var loc = results[0].geometry.location;
                           console.log(addressField.value+" found on Google");
                           console.log("loc : "+loc);
                           return true;
                        } 
                        else {
                           console.log(addressField.value+" not found on Google");
                           return false;
                        } 
                });
        console.log("search: "+search);
        return search;
}

这就是我称之为的地方:

$('#r_frmAddTrip').validate({
errorClass: "addTripError",
rules:{
    r_tripName:{
        required : true
    },
    r_tripDesc:{
        required : false
    },
    r_tripDestination:{
        required : true
    },
    r_tripType:{
        required: true
    },
    r_startDate:{
        required: true
    },
    r_endDate:{
        required: true,
        compareDates: "#r_startDate"
    }        
},
messages:{
    r_tripName:{
        required: "Please Enter Trip Name."
    },
    r_tripDestination:{
        required : "Please Enter Destination."
    },
    r_tripType:{
        required: "Please select trip type."
    },
    r_startDate:{
        required: "Please select start date."
    },
    r_endDate:{
        required: "Please select return date.",
        compareDates: "Return date should be greater than start date."
    }
},
submitHandler: function() {
    console.log("No add trip validation errors!");
    var searchStatus = validateMapSearchInput('r_tripDestination');
    console.log(searchStatus);
    if(searchStatus){
        addTrip();
        console.log("Trip added");
    }else{
        console.log("TRip not added");
    }        
    return false;
}
});

问题:搜索状态始终未定义。我不知道为什么..如果我至少能返回一些东西,我就可以完成这项工作。我什至尝试返回字符串而不是真/假。

感谢您的帮助!

geocoder.geocode(...)是一个

AJAX 调用,因此返回该方法调用的结果不会给你任何信息,而是你需要利用回调根据结果执行进一步的操作。

类似的东西

$('#r_frmAddTrip').validate({
  submitHandler: function(form) {
    validateMapSearchInput('r_tripDestination', form);
  }
});

然后

function validateMapSearchInput(searchBoxID, form)
{
    var addressField = document.getElementById(searchBoxID);
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode(
        {'address': addressField.value}, 
        function(results, status) { 
            if (status == google.maps.GeocoderStatus.OK) 
            {
                var loc = results[0].geometry.location;
                console.log(addressField.value+" found on Google");
                console.log("loc : "+loc);
                form.submit(); // continue with form submission
            } else {
                console.log(addressField.value+" not found on Google");
            } 
        }
    );
}

请注意,这是未经测试的,您的里程可能会有所不同...

这是一个jsfiddle:http://jsfiddle.net/5mxrz/