Question

我正在尝试在提交表单时在后台检测地理位置，请在下面查看我的代码

<input type="hidden" id="f33" name="f33" value="" data-rule-required="true" readonly  />

<script>
var x = document.getElementById("f33");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    x.value = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.value = "Latitude: " + position.coords.latitude + 
  " Longitude: " + position.coords.longitude;
}
</script>

从上面的代码中，我能够检测到输入字段中的位置，但是，如果设备GPS关闭（作为空白字段），表单仍在提交。

如果此输入字段为空，有什么方法可以限制表单提交？

Answer 1

尝试标记该字段required：

<form>
  <label for="choose">Would you prefer a banana or cherry?</label>
  <input id="choose" name="i_like" required>
  <button>Submit</button>
</form>

来源：https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#The_required_attribute

Answer 2

这取决于您提交表单的方式，如果通过Ajax（javascript）提交表单，则只需添加if语句即可。如果使用html提交，则可以尝试向输入中添加必需的属性，但这可能不是最佳解决方案。

Answer 3

这是一种通用方法

window.addEventListener("load",function() {
  document.getElementById("yourFormID").addEventListener("submit",function(e) {
    if (document.getElementById("f33").value.trim() === "") {
      alert("Please enable your location services if present");
      e.preventDefault(); // cancel submit
    }
  });
});

如果隐藏的输入字段为空，则限制表单提交

3 个答案: