Javascript jQuery-表单验证延迟了一个事件

我正在使用谷歌地图帮助用户更快地填写我的表格

表单是可选的，因此默认情况下，“提交”按钮处于启用状态。每当用户使用API autocomplete选择任何地址时，我想检查是否填写了邮政编码和地区输入，如果不是，则应禁用该按钮

问题是jQuery代码延迟了一个事件，它在邮政编码和位置更新之前被调用

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

请参阅上的演示

HTML:

---

如何解决此问题？

找到了一种方法，我使用google maps eventListener调用了我的函数

Javascript:

---

updateForm将在fillInAddress之后调用，如注释中所述，您应该使用回调。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);
  })
}

---

使用来自自动完成的回调。这是异步的，请不要要求我们调试缩小的代码。JSFIDLE上有一个整洁的按钮，您可以使用它使其可读。

$(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.

function updateForm() {
    if ($('#postal_code').val().length > 1 && $('#locality').val().length > 1) {
        $('#submit-form').prop('disabled', false);
    } else {
        $('#submit-form').prop('disabled', true);
    }
}

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
    updateForm();
});

$(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);
  })
}