如何实现带空字段校验的表单提交延迟

问题背景 #

我有一个带空字段校验的表单，希望在字段校验通过后延迟提交表单。以下是仅针对2个字段的代码（实际有7个字段）：

字段校验代码 #

<script type="text/javascript">
function FrontPage_Form3_Validator(theForm)
{
  if (theForm.First_Name.value == "")
  {
    alert("Please enter a value for the \"First Name\" field.");
    theForm.First_Name.focus();
    return (false);
  }

  if (theForm.Last_Name.value == "")
  {
    alert("Please enter a value for the \"Last Name\" field.");
    theForm.Last_Name.focus();
    return (false);
  }

  return (true);
}
</script>

表单代码 #

<form method="POST" action="https://example.com" onsubmit="return FrontPage_Form3_Validator(this);" name="FrontPage_Form3" id="detailsphp" autocomplete="on">
  <input class="textlinesubmit" type="text" name="First_Name" tabindex="1">
  <input class="textlinesubmit" type="text" name="Last_Name" tabindex="2">
  <input id="submitbutton" class="updatemyordersubmitbutton" type="submit" value="Submit Order" name="B1" tabindex="13" style="width:110px;font-family:arial;height:30px;" onclick="sometrackevent;">
</form>

我尝试了多种方法都无法在保留空字段校验的前提下实现延迟提交：

• 在校验函数里用setTimeout包裹return true，不符合JS语法，导致表单直接跳过校验提交
• 把提交按钮改成button类型，无法正确触发校验函数
• 修改表单onsubmit事件的写法，用setTimeout包裹校验逻辑，均无效
• 直接写延迟提交函数，结果页面加载时就触发了提交，而非等待onsubmit事件

解决方案 #

核心逻辑：先阻止表单默认提交行为，在校验通过后，延迟调用表单的submit()方法。

方法一：修改onsubmit事件逻辑（推荐） #

保留原有校验函数，修改表单的onsubmit属性，先阻止默认提交，再执行校验，校验通过后延迟提交：

<form method="POST" action="https://example.com" onsubmit="handleSubmit(this); return false;" name="FrontPage_Form3" id="detailsphp" autocomplete="on">
  <input class="textlinesubmit" type="text" name="First_Name" tabindex="1">
  <input class="textlinesubmit" type="text" name="Last_Name" tabindex="2">
  <input id="submitbutton" class="updatemyordersubmitbutton" type="submit" value="Submit Order" name="B1" tabindex="13" style="width:110px;font-family:arial;height:30px;">
</form>

<script type="text/javascript">
function FrontPage_Form3_Validator(theForm) {
  if (theForm.First_Name.value == "")
  {
    alert("Please enter a value for the \"First Name\" field.");
    theForm.First_Name.focus();
    return false;
  }

  if (theForm.Last_Name.value == "")
  {
    alert("Please enter a value for the \"Last Name\" field.");
    theForm.Last_Name.focus();
    return false;
  }

  return true;
}

function handleSubmit(theForm) {
  // 执行校验
  const isValid = FrontPage_Form3_Validator(theForm);
  if (isValid) {
    // 校验通过，延迟5秒提交
    setTimeout(() => {
      theForm.submit();
    }, 5000);
    // 执行跟踪事件
    sometrackevent();
  }
}
</script>

方法二：调整校验函数逻辑 #

如果不想修改onsubmit的返回逻辑，可以直接调整校验函数，注意必须返回false阻止默认提交，在校验通过后手动延迟提交：

<form method="POST" action="https://example.com" onsubmit="return FrontPage_Form3_Validator(this);" name="FrontPage_Form3" id="detailsphp" autocomplete="on">
  <!-- 表单字段不变 -->
</form>

<script type="text/javascript">
function FrontPage_Form3_Validator(theForm) {
  if (theForm.First_Name.value == "")
  {
    alert("Please enter a value for the \"First Name\" field.");
    theForm.First_Name.focus();
    return false;
  }

  if (theForm.Last_Name.value == "")
  {
    alert("Please enter a value for the \"Last Name\" field.");
    theForm.Last_Name.focus();
    return false;
  }

  // 校验通过，延迟5秒提交
  setTimeout(() => {
    theForm.submit();
  }, 5000);
  sometrackevent();
  // 返回false阻止默认提交
  return false;
}
</script>

关键注意点 #

• 不能在setTimeout内部返回true/false，因为setTimeout是异步执行的，返回值无法被onsubmit事件捕获，必须先阻止默认提交再手动触发提交
• 若使用button类型的提交按钮，需在onclick中传入表单对象：onclick="handleSubmit(document.getElementById('detailsphp'));"，才能正确触发校验
• 之前页面加载就触发提交的问题，是因为你把setTimeout(mysubmitForm, 5000);写在了全局作用域，页面加载时就会执行这段代码，而非绑定到onsubmit事件

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