如何验证我的谷歌地图搜索文本框是否存在无效输入
How can I validate my google map search text box for invalid input?
这是我关于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/
相关文章:
- 在链接中的文本中搜索
- 文本框搜索&回来
- 文本框搜索/Javascript函数数组**不对应**
- JS:在文本区域搜索特定字符串
- OpenLayers:自动将 EPSG 4326 - 文本图层的坐标转换为地图的投影 (EPSG:900913)
- 使用输入文本框搜索和筛选 html 表数据
- Javascript在正文文本中搜索关键字,如果找到,则重定向到特定的URL
- Photoshop 脚本 - 如何在一种历史记录状态下创建文本图层
- 区分多个字体在同一文本图层
- Jquery搜索文本框:搜索时如何忽略列表中重复的元素
- 剑道网格改变值使用外部文本框搜索
- 垂直或水平文本的搜索功能
- 如何让用户输入文本来搜索数组对象,然后输出是否有匹配?请使用纯Javascript
- 如何在jQuery中选择输入类型文本和搜索body blur
- 将文本写入搜索框后自动触发回车键
- javascript来隐藏所有与文本输入搜索框的内容不对应的客户端
- Photoshop 脚本:更改文本图层的文本
- Javascript Photoshop:用于更改现有文本图层的文本颜色的语法
- Ajax自动完成文本框搜索箭头键选择不工作
- 添加默认搜索文本到搜索框html