Javascript 检查输入值-谷歌地图自动完成

我试图使用javascript在PHP表单上实现以下内容

强制用户从下拉列表中选择谷歌地图地址

如果他们没有从下拉列表中选择值，则输入错误（现有代码使用地理坐标填充隐藏字段-这是必需的）

如果他们只是键入一个地址，而没有从列表中选择它，我需要提醒用户屏幕上的事实

根据我在wordpress中使用的插件，现有代码自动填充隐藏的输入字段

Javascript:

pp_321_geo_initialize();

                function pp_321_geo_initialize() {

                    var location_field_name = 'field_321';
                    var save_geocode = '1';

                    // if you want to use place names as well as proper addresses, use this instead
                    // pp_321_autocomplete = new google.maps.places.Autocomplete( (document.getElementById(location_field_name)) );

                    pp_321_autocomplete = new google.maps.places.Autocomplete( (document.getElementById(location_field_name)), { types: ['address'] });

                    google.maps.event.addListener(pp_321_autocomplete, 'place_changed', function() {

                        var address = pp_321_autocomplete.getPlace();
                        document.getElementById(location_field_name).value = address.formatted_address;

                        if ( save_geocode == '1' )
                            pp_321_extract_geocode();

                    });

                }

                    function pp_321_extract_geocode() {

                        var place = pp_321_autocomplete.getPlace();
                        console.log( place );
                        var lat = place.geometry.location.lat();
                        var lng = place.geometry.location.lng();
                        var latlng = lat + ',' + lng;
                        document.getElementById('pp_321_geocode').value = latlng;

                    }

表单本身（BuddyPress配置文件编辑页面）具有与页面相关的以下字段：

<input id="field_321" name="field_321" type="text" value="" placeholder="Enter your address" class="form-control valid" autocomplete="off" required="required" aria-required="true" aria-invalid="false">
<input type="hidden" id="pp_321_geocode" name="pp_321_geocode" value="">

我考虑将以下内容添加到google.maps.event.addListener函数中：

var has_geocode = document.getElementById(‘pp_<?php bp_the_profile_field_id(); ?>_geocode’).value
if (has_geocode=='') {
return false;
}

var有\u geocode=document.getElementById（'pp\u geocode'）.value
如果（具有地理代码=“”）{
返回false；
}

我还愿意使用该代码添加另一个div，以便在屏幕上显示错误消息（将div从隐藏更改为显示）

我的Javascript编码仍然不好，我已经四处寻找我认为需要的东西，但我不一定知道如何将不同的代码组合在一起以获得我想要的东西

HTML:

<input id="field_321" name="field_321" type="text" value="" placeholder="Enter your address" class="form-control valid" autocomplete="off" required="required" aria-required="true" aria-invalid="false">
<input type="text" id="pp_321_geocode" name="pp_321_geocode" value="">
<div id="field_321-error"></div>

JS：（美化）

---

这主要是有效的，只是它不是一直有效。我只在javascript中添加了Buddypress自动生成该字段所在的页面，我不想在核心Buddypress文件中添加额外的代码。我可以在页面首次加载时显示错误，但我无法让它持续显示。我需要在他们按enter键保存值、按tab键进入另一个字段或它失去焦点时显示错误。如果您可以编辑代码来做到这一点，那么它工作得非常好，只有在我在代码上放置断点时才会一致显示。因此，

input

元素是动态生成的，并且它们的ID在每次页面加载时也会更改？你提供的JS脚本怎么样；它也是动态生成的吗？id保持不变。您的代码片段表现出相同的行为，我想知道当我试图完成输入时，它没有被正确选择。如果值不变，它也会停止页面提交，即地址从上次提交时起有效，它会停止页面提交，直到再次从下拉列表中选择为止。需要允许输入不改变，并且仍然允许它保存我已经更新了答案。尝试一下，让我知道。仍然不完全正确，表单现在提交了一个错误的地址，在弹出警报后。如果未正确选择地址，则需要停止表单提交或停止对输入失去焦点，但如果地址未更改，则忽略检查。

/* Styles for the address input/field when the value is invalid. */
#field_321.has-error {
  border-color: red;
  color: red;
}

/* Styles for the error message/box for the address input/field. */
#field_321-error {
  display: none;
  color: red;
}

var pp_321_autocomplete;

pp_321_geo_initialize();

function pp_321_geo_initialize() {

  var location_field_name = 'field_321';
  var save_geocode = '1';

  var error_message = 'Please select an address from the list.',
    showError = function() {
      jQuery('#' + location_field_name).addClass('has-error');
      jQuery('#' + location_field_name + '-error').html(error_message).show();

      _has_error = true;
    },
    hideError = function() {
      if (_has_error) {
        jQuery('#' + location_field_name).removeClass('has-error');
        jQuery('#' + location_field_name + '-error').hide().html('');

        _has_error = false;
      }
    },
    _has_error;

  // if you want to use place names as well as proper addresses, use this instead
  // pp_321_autocomplete = new google.maps.places.Autocomplete( (document.getElementById(location_field_name)) );

  pp_321_autocomplete = new google.maps.places.Autocomplete((document.getElementById(location_field_name)), {
    types: ['address']
  });

  google.maps.event.addListener(pp_321_autocomplete, 'place_changed', function() {

    var address = pp_321_autocomplete.getPlace();

    if (undefined !== address.formatted_address) {
      jQuery('#' + location_field_name).val(address.formatted_address);
      hideError();
    } else {
      jQuery('#pp_321_geocode').val('');
      return;
    }

    if (save_geocode == '1')
      pp_321_extract_geocode();

  });

  jQuery('#' + location_field_name).on('change', function() {
    var value = jQuery(this).val(),
      address = pp_321_autocomplete.getPlace();

    if (value && (!address || address.formatted_address !== value)) {
      showError();
      this.focus();
    }

    if (!value) {
      jQuery('#pp_321_geocode').val('');
    }
  });

}

function pp_321_extract_geocode() {

  var place = pp_321_autocomplete.getPlace();
  console.log(place);
  var lat = place.geometry.location.lat();
  var lng = place.geometry.location.lng();
  var latlng = lat + ',' + lng;
  document.getElementById('pp_321_geocode').value = latlng;

}