Question

这是我关于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;
}
});

问题：searchStatus总是未定义的......我不知道为什么..如果我能够至少返回一些东西，我可以让它工作。我甚至试过返回字符串而不是真/假。

感谢您的帮助！

Answer 1

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");
            } 
        }
    );
}

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

这是一个小伙伴：http://jsfiddle.net/5mxrz/

如何验证我的谷歌地图搜索文本框无效输入？

1 个答案: