1

ユーザーが住所を入力する単純なフォームがあります。

フォームを送信する前に、Places Api を使用して TextSearch を実行し、このデータをフォームの非表示の入力フィールドに入れて送信します。

jQuery Validate を使用してフォームを検証したいのですが、Places データを一緒に取得する方法がわかりません。

Validate で submitHandler を使用する必要があると思いますが、コードをここに配置する方法がわかりません。

$("#myform").validate({
 submitHandler: function(form) {
   form.submit();
 }
});

Validate プラグインを使用していないコードは次のとおりです。

<!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/

4

2 に答える 2

1

オプション 1 - クライアント側の検証

この方法は面倒で少しハックです。他に方法がない場合を除き、これはお勧めしません。別の検証ライブラリを使用するか、独自の検証ライブラリを作成することをお勧めします。これは、私が自分で行う予定です。

簡単なデモ: http://jsfiddle.net/robertdodd/txqnL/27/

段階的に何が起こるかは次のとおりです。

  1. ユーザーが送信をクリック
  2. フォームは jQuery によって検証されます
  3. 送信ハンドラーで、フォームの送信を防ぎ、Googleでアドレスを検索します
  4. Googleが戻ってきたら、隠し入力を埋めて設定しますvalidated = true
  5. 次に、フォームを再送信すると、今回は送信されます。validated == true

オプション 2 - サーバー側の検証:

もう 1 つのオプションは、サーバー側の検証です。とにかくバックアップとしてお勧めします。これを検証プラグインと一緒に使用する方法は次のとおりです。

  1. リモート検証メソッドを使用してサーバーから応答を取得する
  2. リモート検証には特定の文字列が必要なため、 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>

これが誰かに役立つことを願っています！

于 2013-02-03T01:38:05.440 に答える