我正在使用 GoogleMapsAPI 来帮助用户更快地填写我的表单。

该表单是可选的，因此默认情况下会启用提交按钮，每当用户使用 API 自动完成功能选择任何地址时，我想检查 postal_code 和 locality输入已填充，如果没有填充，则应禁用该按钮。

问题是 jQuery 代码晚了一个事件，它在 postal_code 和 locality 更新之前被调用。

当用户选择一个选项并且两个字段都已填写时，应启用该按钮。

请参阅 https://jsfiddle.net/osvktsxz/ 上的演示

HTML:

<input id="autocomplete" placeholder="Enter your address" type="text"> 
<input id="postal_code" placeholder="prefill postal code"> 
<input id="locality" placeholder="prefill locality"> 
<br> 
<button type="button" disabled>Submit</button> 

jQuery:

$(document).on('click keyup change input blur', '#autocomplete', function() { 
    if ($(this).val().length > 0){ 
      $('button').prop('disabled', true); 
      if ($('#postal_code').val().length > 1 && $('#locality').val().length > 1) { 
          $('button').prop('disabled', false); 
      } 
  } else { 
      $('button').prop('disabled', false); 
  } 
}); 
 
// See fiddle for Google Maps API. 

如何解决这个问题？

请您参考如下方法:

正如评论中所述，您应该使用回调。 place_changed 事件始终是最后一个触发的事件，因此您应该在其中执行所需的任何验证(我在回答中没有执行任何操作，您可以自己编写验证代码)并使用启用该按钮。您只需要 keyup 即可确保当用户开始输入新地址时该按钮被禁用。如果您添加 onclick 和 blur 当用户点击输入并且不更改它时，您将会遇到问题。

$(document).on('keyup', '#autocomplete', function() { 
   $('button').prop('disabled', false); 
}); 
 
function formIsValid(){ 
    // you write this code 
    return true; 
} 
 
function initialize() { 
  autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete"), { 
    types: ["geocode"] 
  }), google.maps.event.addListener(autocomplete, "place_changed", function() { 
    fillInAddress() 
    if(formIsValid()) $('button').prop('disabled', false); 
  }) 
}