title: jQuery Validate Address - Google Places API
body: <p>I have a simple form where the user enters an address.</p>
  
  <p>Before the form is submitted I perform a TextSearch using the Places Api and put this data into a hidden input field in the form, and then submit it.</p>
  
  <p><strong>I want to use jQuery Validate to the validate the form, but I dont know how to get the Places data together with it.</strong></p>
  
  <p>I think I have to use the submitHandler with Validate, but im not sure how to put my code in here:</p>
  
  <pre><code>$("#myform").validate({
   submitHandler: function(form) {
     form.submit();
   }
  });
  </code></pre>
  
  <p>Here is my code I have without the Validate plugin:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Maps Test&lt;/title&gt;
          &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
          &lt;style type="text/css"&gt;
              html { height: 100% }
              body { height: 100%; margin: 0; padding: 0 }
              #map_canvas { height: 100% }
          &lt;/style&gt;
          &lt;script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              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;
                  }
              }
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body onload="initialize()"&gt;
          &lt;form id="search-form" name="input" action="html_form_action.asp" method="get" onsubmit="return validateForm()"&gt;
              &lt;input autocomplete="off" placeholder="Address, Airport or Postcode..." id="search-field" size="50" type="text"&gt;&lt;br&gt;
              &lt;input type="hidden" name="placeinfo" id="placeinfo"&gt;
              &lt;input type="SUBMIT" value="Search" /&gt;&lt;br&gt;
          &lt;/form&gt;
  
          &lt;div id="map_canvas" style="width:600px; height:400px"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong> </p>
  
  <p>Here is a Fiddle with the working code: <a href="http://jsfiddle.net/Homeliss/txqnL/26/" rel="nofollow">http://jsfiddle.net/robertdodd/txqnL/26/</a></p>