我有一个简单的表单，用户输入一个地址。
在提交表单之前，我使用Places Api执行TextSearch并将此数据放入表单中的隐藏输入字段，然后提交。
我想使用jQuery Validate来验证表单，但我不知道如何将Places数据与它一起使用。
我想我必须使用带有Validate的submitHandler，但我不知道如何将我的代码放在这里：
$("#myform").validate({
submitHandler: function(form) {
form.submit();
}
});
这是我没有验证插件的代码：
<!DOCTYPE html>
<html>
<head>
<title>Maps Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var map;
var service;
var infowindow;
var service;
var validated = false;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 15
});
service = new google.maps.places.PlacesService(map);
}
function textsearchcallback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var place = results[0];
var request = {
reference: place.reference
};
service.getDetails(request, getdetailscallback);
} else {
alert("ERROR: NO RESULTS FOUND!");
}
}
function getdetailscallback(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
$("#placeinfo").val(JSON.stringify(place));
validated = true;
$("#search-form").submit();
validated = false;
$("#placeinfo").val("");
} else {
alert("ERROR");
}
}
function validateForm() {
var searchfield = $("#search-field").val();
if (searchfield == null || searchfield == "") {
alert("Please enter address");
return false;
}
if (validated) {
return true;
} else {
var request = {
query: searchfield
};
service.textSearch(request, textsearchcallback);
return false;
}
}
</script>
</head>
<body onload="initialize()">
<form id="search-form" name="input" action="html_form_action.asp" method="get" onsubmit="return validateForm()">
<input autocomplete="off" placeholder="Address, Airport or Postcode..." id="search-field" size="50" type="text"><br>
<input type="hidden" name="placeinfo" id="placeinfo">
<input type="SUBMIT" value="Search" /><br>
</form>
<div id="map_canvas" style="width:600px; height:400px"></div>
</body>
</html>
编辑：
这是一个带有工作代码的小提琴：http://jsfiddle.net/robertdodd/txqnL/26/
答案 0 :(得分：1)
这种方法很乱，有点乱，除非你别无他法，否则我不建议这样做。我建议使用another validation library或自己编写，这是我打算自己做的。
简单演示： http://jsfiddle.net/robertdodd/txqnL/27/
继续一步一步发生的事情：
validated = true validated == true 另一个选项是服务器端验证，我建议将其作为备份。以下是如何将它与validate插件一起使用。
继承我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
function initialize() {
$("#search-form").validate({
rules: {
searchfield: {
required: true,
remote: {
url: "/validate",
type: "get",
dataFilter: function(data) {
var json = JSON.parse(data);
var placename = json.placename;
$('#placename').val(placename);
return '"' + json.result + '"';
}
}
}
}
});
}
</script>
</head>
<body onload="initialize()">
<form id="search-form" >
<input autocomplete="off" placeholder="Enter a location" name="searchfield" id="searchfield" type="text" /><br/>
<input type="hidden" name="placename" id="placename" />
<input type="submit" value="Search" /><br/>
</form>
<div id="successmessage"></div>
</body>
</html>
我希望这有助于某人！
答案 1 :(得分：0)
如果我理解正确，您只想集成jQuery Validation来代替您自己的手动验证。是的，您可以在插件submitHandler中调用您的函数，但是您的OP中缺少太多代码，无法使用地图函数的工作演示。
这就像你需要做的那样。
$(document).ready(function () {
$('#myform').validate({ // initialize the plugin
// your rules and options,
ignore: [], // this option is required if you need to validate hidden inputs
submitHandler: function (form) {
// your functions here
form.submit(); // to submit the form when you're ready
}
});
});
或者，如果您需要使用ajax来提交没有页面重定向的表单...
$(document).ready(function () {
$('#myform').validate({ // initialize the plugin
// your rules and options,
ignore: [], // this option is required if you need to validate hidden inputs
submitHandler: function (form) {
// ajax functions here
return false; // to block the normal form submit since you just did it with ajax
}
});
});
<强> HTML：
您还需要从HTML中删除onsubmit事件处理程序，因为它已经内置到jQuery Validate插件中。
<form id="search-form" name="input" action="html_form_action.asp" method="get"
onsubmit="return validateForm()">
会变成......
<form id="search-form" name="input" action="html_form_action.asp" method="get">
简化演示： http://jsfiddle.net/wbdvc/
修改
关于jsFiddle demo in the OP's edit：
以下if/then条件将无法正常运行。 By definition, the submitHandler is the callback for a valid form。换句话说，{/ 1}}函数运行的唯一时间 之后表单已经测试“有效”并且恰好在实际表单{{1}之前}。
submitHandler您可以将其放在submit ...
submitHandler: function(form) {
if (validated) {
// address is validated and hidden input filled, so submit the form
alert('valid form submitted');
validated = false;
} else {
// address is not validated yet, look up on Google Maps
var request = {
query: $("#searchfield").val()
};
service.textSearch(request, textsearchcallback);
}
return false;
}
内。
http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage
这将创建一个新规则，您可以像使用任何其他预定义的Validate插件规则一样使用该规则。