Google Sheet Web App中HTML必填字段为空仍可提交问题求助

问题根源 #

你当前的提交按钮通过onclick="sample1(this.parentNode.parentNode); return false;"直接阻止了表单的默认提交行为，导致浏览器原生的required字段验证完全被跳过——不管纬度和经度是否为空，都会直接执行sample1函数提交数据。

修复方案 #

方法1：提交前手动验证必填字段 #

修改提交按钮的onclick逻辑，先检查纬度和经度输入框是否有值，验证通过再执行提交逻辑，否则提示用户：

<button size="20" type="submit" onclick="if(checkLocation()){sample1(this.parentNode.parentNode);} return false;">Sign In/Sign Out</button>

在<script>标签内添加验证函数：

function checkLocation() {
  const lat = document.getElementById("Latitude").value;
  const lng = document.getElementById("Longitude").value;
  if(!lat || !lng) {
    alert("请先点击获取位置按钮填充纬度和经度！");
    return false;
  }
  return true;
}

方法2：利用表单原生验证（推荐） #

移除按钮上的onclick，改为监听表单的submit事件，让浏览器先完成原生required验证，验证通过后再执行提交逻辑：

1. 修改表单标签，添加onsubmit事件：

<form onsubmit="handleSubmit(event);">

2. 修改提交按钮，去掉onclick属性：

<button size="20" type="submit">Sign In/Sign Out</button>

3. 添加handleSubmit函数替换原sample1的调用逻辑：

function handleSubmit(event) {
  // 阻止默认表单提交行为
  event.preventDefault();
  
  // 能走到这一步说明浏览器已完成required字段验证
  google.script.run.withFailureHandler(err => console.log(err))
  .withSuccessHandler(f => {
    const responseText = '{"result": "success"}';
    const response = JSON.parse(responseText);
    if (response.result === 'success') {
      showSuccessMessage();
    }
  }).sample2(event.target);
}

额外优化建议 #

• 给纬度和经度输入框添加提示文本，比如<input ... placeholder="请点击获取位置">，明确引导用户操作。
• 在getLocation函数中补充用户拒绝地理位置授权的提示逻辑，避免用户因授权问题无法填充字段。

内容的提问来源于stack exchange，提问作者Pieter le Roux