【问题标题】：jQuery Validate Address - Google Places APIjQuery 验证地址 - Google Places API
【发布时间】：2013-01-17 16:13:10
【问题描述】：

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

在提交表单之前，我使用 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/

【问题讨论】：

请解释一下“将地点数据与它一起获取” 应该是什么意思。您要验证的数据的具体参数是什么？
我认为您的项目太大，无法指望其他人为您完成所有工作，并且您的 JS 中引用的大部分 HTML 都丢失了。我建议您使用下面我的答案开始，使用 jsFiddle 构建工作演示，然后在遇到困难时在 SO 上发布一个新问题。请使它们尽可能具体和简洁。有关提示，请参阅sscce.org。
感谢您的提示，对于这个凌乱的问题，我们深表歉意。从那以后，我看到了一些关于小提琴演示的其他问题，它们让帮助变得更加容易！
查看我的回答中指出逻辑错误的编辑。

标签： jquery google-maps google-maps-api-3 jquery-validate google-places-api

【解决方案1】：

选项 1 - 客户端验证

这种方法很麻烦而且有点hack，除非你没有其他方法，否则我不建议这样做。我建议使用another validation library 或自己编写，这是我自己打算做的。

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

接下来会发生什么：

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

选项 2 - 服务器端验证：

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

使用remote validation method 从服务器获取响应
使用dataFilter 从响应中检索地图信息，将其放入隐藏输入中，然后通过返回“true”或“错误消息”来更改响应，因为远程验证需要特定字符串 (@987654325 @)

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

我希望这对某人有帮助！

【讨论】：

【解决方案2】：

如果我理解正确，您只想集成 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：

您还需要从 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。换句话说，submitHandler 函数运行的唯一时间是表单已经测试“有效”之后，并且就在实际表单 submit 之前。 p>

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

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

【讨论】：

在发布我的答案后才看到您的编辑，我会检查并回复您，谢谢！
当我使用 addMethod 时，只要文本框发生更改并失去焦点，就会调用该函数。这意味着在提交表单之前，我的回调最终会调用 form.submit。这里：jsfiddle.net/Homeliss/hX4FN/5
@Homeliss，现在我明白你为什么最初将validated 放在submitHandler 中了。我对插件了解很多，但对谷歌地图代码不太熟悉。这个更好吗？ jsfiddle.net/hX4FN/6
@Homeliss，这里的想法是在自定义方法和/或submitHandler 中包含尽可能多的代码。如果我们能正确地解决这个问题，我们根本不需要validate 标志。 form.submit() 应该在 inside submitHandler 并且没有其他地方。
@Homeliss, form.submit() 是submitHandler 内使用的简写。 $("#search-form").submit() 是一样的。我说“不要在submitHandler 之外执行此操作”，因为submitHandler 是您在使用验证插件时负责submit 点击事件的对象。我认为一次使用多个submit 点击处理程序既冗长又不可靠。