HTML表单required/pattern属性与提交逻辑冲突问题求助

问题 #

• required和pattern属性仅间歇性生效；
• 给提交按钮绑定click事件时，表单验证失效；改成绑定form的submit事件后，验证正常但提交后出现空白页，addEntry函数未执行，无日志输出；
• 移除按钮事件监听器，给form添加onsubmit="addLine()"属性，addLine里的alert可触发，但提交后仍为空白页；
• 已单独验证正则表达式功能正常。

相关代码 #

JavaScript代码 #

var v = "userForm"

document.getElementById("clockIn").addEventListener("click", addLine); //CHANGE TO CLICK FOR WORKING PAGE BUT PATTERN WONT WORK

function addLine() {
  //e.preventDefault();
  var firstName = document.getElementById("fname").value;
  var lastName = document.getElementById("lname").value;
  var jobNumber = document.getElementById("jnum").value;
  var process = document.querySelector('input[name="operation"]:checked').value;
  var comment = document.getElementById("comment").value;
  var timeIn = new Date().toLocaleString();

  var info = [firstName, lastName, jobNumber, process, timeIn, comment];
  google.script.run.addEntry(info);
  document.getElementById("fname").value = "";
  document.getElementById("lname").value = "";
  document.getElementById("jnum").value = "";
  document.getElementById("comment").value = "";
  document.querySelector('input[name="operation"]:checked').checked = false;
  alert("Submitted");
}


function addEntry(info) {
  var ssid = "1E81r5Xy**********************W1o4Q";
  var ss = SpreadsheetApp.openById(ssid);
  var oj = ss.getSheetByName("Open Jobs");
  var FileIterator = DriveApp.getFilesByName("Drawings & Links");
  while (FileIterator.hasNext()) {
    var file = FileIterator.next();
    if (file.getName() == "Drawings & Links") {
      // var Sheet = SpreadsheetApp.open(file);
      var dlid = file.getId();
    }
  }
  var drawingLinks = SpreadsheetApp.openById(dlid);
  var dl = drawingLinks.getSheetByName("Sheet1");
  Logger.log(dlid)
  oj.appendRow(info);
}

HTML代码 #

<form id="inputForm">
  <h2 class="subHead">
    Enter Basic Information
  </h2>
  <label for="fname" class="form">First name:</label><br><br>
  <input type="text" id="fname" name="fname" size="25" style="font-size:25px;" placeholder="John" required><br><br>
  <label for="lname" class="form">Last name:</label><br><br>
  <input type="text" id="lname" name="lname" size="25" style="font-size:25px;" placeholder="Doe" required><br><br>
  <label for="jnum" class="form">Job number:</label><br><br>
  <input type="text" id="jnum" name="jnum" size="25" style="font-size:25px;" pattern="[A-Z]-[0-9]{4}" placeholder="A-1234" required><br>
  <h2 class="subHead">
    Select Operation
  </h2>
  <div>
    <label for="cut" class="form">Cut</label>
    <input type="radio" id="cut" name="operation" value="cut" required><br><br>
    <label for="drill" class="form">Drill</label>
    <input type="radio" id="drill" name="operation" value="drill" required><br><br>
    <label for="fitup" class="form">Fit Up</label>
    <input type="radio" id="fitup" name="operation" value="fit up" required><br><br>
    <label for="weld" class="form">Weld</label>
    <input type="radio" id="weld" name="operation" value="weld" required><br>
  </div>
  <h2 class="subHead">
    Enter Comments
  </h2>
  <input type="text" id="comment" size="25" style="font-size:25px;" placeholder="Optional"><br>
  <br>
  <input type="submit" id="clockIn" class="button" value="Clock In">
</form>

解决方案 #

1. 修复表单验证失效问题 #

浏览器的内置表单验证只有在表单触发submit事件时才会自动执行，绑定按钮click事件会绕过这个流程。直接监听表单的submit事件即可：

// 移除按钮的click事件绑定，替换为表单的submit事件监听
document.getElementById("inputForm").addEventListener("submit", addLine);

2. 解决提交后空白页问题 #

空白页是因为表单默认提交行为（页面刷新）没被阻止，必须在addLine函数中阻止默认行为：

function addLine(e) {
  e.preventDefault(); // 阻止表单默认提交，避免页面刷新
  // 原函数逻辑保持不变
  var firstName = document.getElementById("fname").value;
  var lastName = document.getElementById("lname").value;
  var jobNumber = document.getElementById("jnum").value;
  var process = document.querySelector('input[name="operation"]:checked').value;
  var comment = document.getElementById("comment").value;
  var timeIn = new Date().toLocaleString();

  var info = [firstName, lastName, jobNumber, process, timeIn, comment];
  
  // 后续逻辑调整见下一点
}

3. 确保addEntry执行并排查无日志问题 #

google.script.run是异步操作，原代码中alert和表单清空逻辑会在提交请求发出后立刻执行，无法确认addEntry是否成功。加上成功/失败回调，同时排查问题：

google.script.run
  .withSuccessHandler(function() {
    console.log("数据提交成功");
    alert("Submitted");
    // 提交成功后再清空表单
    document.getElementById("fname").value = "";
    document.getElementById("lname").value = "";
    document.getElementById("jnum").value = "";
    document.getElementById("comment").value = "";
    const checkedRadio = document.querySelector('input[name="operation"]:checked');
    if (checkedRadio) checkedRadio.checked = false;
  })
  .withFailureHandler(function(error) {
    console.error("提交失败原因:", error);
    alert("提交失败，请重试");
  })
  .addEntry(info);

另外，Google Apps Script的Logger.log需要在脚本编辑器的日志面板查看，前端控制台看不到，若要在前端输出，可在addEntry末尾返回dlid，在withSuccessHandler中打印。

4. 优化用户体验（可选） #

给pattern属性加上title，明确提示用户正确格式：

<input type="text" id="jnum" name="jnum" size="25" style="font-size:25px;" pattern="[A-Z]-[0-9]{4}" placeholder="A-1234" required title="格式要求：大写字母+横杠+4位数字，例如A-1234">

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