如何解决HTML表单中required必填属性不生效的问题

• 你在submit按钮的onclick事件中写了return false，直接阻止了表单原生提交流程，HTML5的required属性只有在触发表单默认提交逻辑的时候才会自动校验，所以直接失效
• 自定义的submitValues提交逻辑里没有主动触发表单校验的代码，自然不会判断必填项是否填写

1. 修改提交按钮代码，删除原有绑定的点击事件逻辑：
   原代码：

<input type="submit" value="限影像檔(不可使用PDF)" onclick="submitValues(this); return false;">

修改后：

<input type="submit" value="限影像檔(不可使用PDF)">

如果需要文件上传也强制必填，给文件选择框补充required属性：

<input type="file" name="userFile" accept="image/jpeg,image/gif,image/png" onchange="checkfile(this);" required>

2. 给表单绑定submit事件，优先触发原生校验：
   修改form标签代码：

<form id="contact" action="" method="post" onsubmit="return submitValues(this)">

3. 重写submitValues函数，先执行原生校验再走上传逻辑：

function submitValues(form) {
  // 触发原生表单校验，校验不通过直接返回false，弹出浏览器默认必填提示
  if (!form.checkValidity()) {
    return false;
  }
  const submitBtn = form.querySelector('input[type="submit"]');
  submitBtn.value = 'Uploading...';
  submitBtn.disabled = true;
  const files = [form.userFile.files[0]];
  const object = [...form].reduce((o, obj) => Object.assign(o, {[obj.name]: obj.value}), {});
  if (files.some(f => f)) 
  {
    Promise.all(
      files.map(file => new Promise((resolve, reject) => {
        if (file) {
          const fr = new FileReader();
          fr.onload = f => resolve({filename: file.name, mimeType: file.type, bytes: [...new Int8Array(f.target.result)]});
          fr.onerror = err => reject(err);
          fr.readAsArrayBuffer(file);
        } else {
          resolve({});
        }
      }))
    ).then(ar => {
      [object.userFile] = ar;
      google.script.run.withSuccessHandler(fileUploaded).uploadFiles(object);
    });
  }
  // 阻止默认表单跳转，保留你的异步上传逻辑
  return false;
}

内容的提问来源于stack exchange，提问作者Steven Yin