javascript - jQuery - 表单验证是迟到的一件事

Question

我正在使用 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.

如何解决这个问题？

Answer 1

正如评论中所述，您应该使用回调。 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);
  })
}