如何验证Google Places自动填充地址字段

时间:2019-12-25 07:08:43

标签: javascript jquery googleplacesautocomplete

我想验证此输入字段。用户必须先从Google自动地址中选择一个地址,然后才能进行下一步。 这是输入字段

<!-- Step 7 -->
<div id="step-7" class="p-5 animated slideInRight" style="display: none;">
    <div class="app-inner">
        <h3 class="mb-5">Where Are You Looking for a Vehicle?</h3>
        <div class="app-row">
            <div class="app-list-wrap">
                <div class="app-list-wrap-inner">
                    <div class="app-list text-center">
                        <label class="label-text">Home Address<span id="erroraddress" style="color: red;"></span></label>
                        <div data-step="7" class="custom-box app-input-container home">
                            <input type="text" name="homeaddress" id="search_input" placeholder="Begin Typing Adress Here">
                            <input type="hidden" id="latitude_input" />
                            <input type="hidden" id="longitude_input" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="address-selection-message" id="addressSelectionMessage">
            <p>The Address you have selected is: </p>
            <p class="message" id="addrMessage"></p>
        </div>
    </div>
    <div class="app-btn-wrap">
        <button data-step="6" class="app-btn prev7_6" id="p_pusher7_6">Previous</button>
        <a href="#cngpopup" rel="modal:open"><button data-step="8" class="app-btn next7_8" id="lookingVehicle">Continue</button></a>
    </div>
    <div class="button-btm-text">
        Available programs vary based on where you live. Please help us find the most convenient option for you by entering your home mailing address above.
    </div>
</div>

这是从Google地址API填充的脚本 我需要使用Google自动地址验证该字段。 如果用户输入任何自定义地址,则会显示错误,无法继续操作

  //Searching pop-up functionality
  var percent;
  var needleDegree;
  var outerCircle = document.querySelector("#circle");
  var meter_needle = document.querySelector("#pin");
  var cf = 600;

  function startSpeedooMeter() {
      percent = percent + 1;
      needleDegree = needleDegree + 0.36346153846;
      if ((percent <= 520) && needleDegree <= 100) {
          $(".svg").show();
          $(".congrates").hide();
          // var meter_value = semi_cf - ((percent * semi_cf) / 100);
          outerCircle.setAttribute("stroke-dasharray", percent + "," + cf);
          meter_needle.style.transform = "rotate(" +
              needleDegree + "deg)";
          //lbl.textContent = percent + "%";
      } else {
          $(".svg").hide(1000);
          $(".congrates").show(1000);
          $("#searchStatus").html("Loan Programs Available in:")
          clearInterval(interval);
      }
  }



  var searchInput = 'search_input';

  $(document).ready(function () {

      var defaultBounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(-33.8902, 151.1759),
          new google.maps.LatLng(-33.8474, 151.2631));

      var input = document.getElementById('search_input');
      var options = {
          bounds: defaultBounds,
          types: ['establishment'],
          componentRestrictions: {
              country: 'gb'
          }

      };

      autocomplete = new google.maps.places.Autocomplete(input, options);
      autocomplete.setFields(['address_component']);

      // When the user selects an address from the drop-down, populate the
      // address fields in the form.
      autocomplete.addListener('place_changed', fillInAddress);

      function fillInAddress() {
          debugger;
          var place = autocomplete.getPlace();
          var City = place.address_components[4];
          for (var i = 0; i < place.address_components.length; i++) {
              var addressType = place.address_components[i].types[0];
              if (addressType == 'postal_town') {
                  City = place.address_components[i].long_name;
                  break;
              }
          }
          $(".searching-popup-location").html(City);
      }



  });
  $("#search_input").keyup(function () {

      $('#addressSelectionMessage').css({
          opacity: '0'
      });
  });
  $("#search_input").change(function () {
      setTimeout(addressShow, 800);
  });

  function addressShow() {

      $('#addrMessage').text($('#search_input').val());
      $('#addressSelectionMessage').css({
          opacity: '1',
          transition: '.3s',
          top: '251px'
      });
  }

  // where are you looking vehicle
  $('#lookingVehicle').click(function () {
      debugger;
      percent = 0;
      needleDegree = -89;

      interval = setInterval(startSpeedooMeter, 5);

      $('.searching-popup').addClass('button_loader');
      window.setTimeout(function () {
          $('.searching-popup').removeClass('button_loader');
      }, 6000);

  });

0 个答案:

没有答案