我想验证此输入字段。用户必须先从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);
});