jquery - jQuery 验证地址 - Google Places API

Question

我有一个简单的表单，用户可以在其中输入地址。

在提交表单之前，我使用 Places Api 执行 TextSearch 并将此数据放入表单中的隐藏输入字段中，然后提交。

我想使用 jQuery Validate 来验证表单，但我不知道如何将 Places 数据与它一起获取。

我想我必须将 submitHandler 与 Validate 一起使用，但我不确定如何将我的代码放在这里：

$("#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/

score 1 · Accepted Answer

选项 1 - 客户端验证

这种方法很麻烦而且有点 hack，除非你别无他法，否则我不建议这样做。我建议使用另一个验证库或编写自己的验证库，这是我自己打算做的。

简单演示：http: //jsfiddle.net/robertdodd/txqnL/27/

这是一步一步发生的事情：

用户点击提交
表单由 jQuery 验证
在提交处理程序中，我阻止表单提交并使用谷歌查找地址
当谷歌返回时，我填写隐藏的输入并设置validated = true
然后我重新提交表单，这次提交是因为validated == true

选项 2 - 服务器端验证：

另一种选择是服务器端验证，无论如何我建议将其作为备份。以下是如何将它与 validate 插件一起使用。

使用远程验证方法从服务器获取响应
使用dataFilter从响应中检索地图信息，将其放入隐藏输入中，然后通过返回“true”或“错误消息”来更改响应，因为远程验证需要某个字符串（请阅读此处）

这是我的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>

我希望这可以帮助别人！

score 0 · Accepted Answer

如果我理解正确，您只想集成 jQuery Validation 来代替您自己的手动验证。是的，您可以从插件中调用您的函数submitHandler，但是您的 OP 中缺少太多代码，无法进行 Maps 函数的工作演示。

这就像你需要做的事情。

$(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：

您还需要onsubmit从 HTML 中删除事件处理程序，因为它已经内置到 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/

编辑：

关于OP 编辑中的 jsFiddle 演示：

以下if/then条件永远不会正常工作。根据定义，submitHandler是有效表单的回调。换句话说，函数运行的唯一时间是在表单已经测试“有效”之后和实际表单之前。submitHandlersubmit

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

submitHandler您可以将其放在...中，而不是将该逻辑放在addMethod...

http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage

这将创建一个新规则，您可以像使用任何其他预定义的 Validate 插件规则一样使用它。

jquery - jQuery 验证地址 - Google Places API

2 回答 2

选项 1 - 客户端验证

选项 2 - 服务器端验证：

Related

Reference