如何阻止表单重新提交时HTML DOM元素重复生成？

我来帮你搞定这个重复生成元素的问题！你遇到的核心问题是每次点击"Register"按钮时，都会往错误容器里重复添加新的提示元素，而且之前尝试的布尔值方法没生效，主要是因为错误容器没有被清空，加上表单提交的阻止逻辑和验证嵌套有小问题。

核心解决方案步骤： #

1. 每次验证前清空错误容器：在生成新的错误提示前，先把errorTitle和errorParagraph里的旧内容清空，这样就不会重复叠加元素了。
2. 修正验证逻辑：你原来把邀请码的验证嵌套在邮箱为空的判断里，这会导致邮箱不为空时，邀请码的验证不会执行，应该把两个验证分开，确保所有必填项都被检查。
3. 确保表单提交被正确阻止：把return false放在合适的位置，确保任何验证不通过的情况都能阻止表单刷新提交。

修改后的完整代码： #

// 全局获取表单元素，避免重复查询
var form = document.getElementById("loginForm");
form.onsubmit = validateForm;

function validateForm() {
  // 1. 先清空之前的错误内容，避免重复生成
  const errorTitle = document.getElementById("errorTitle");
  const errorParagraph = document.getElementById("errorParagraph");
  errorTitle.innerHTML = "";
  errorParagraph.innerHTML = "";
  errorTitle.classList.add("errorTitle");
  errorParagraph.classList.add("errorParagraph");

  let hasError = false;
  const formError = document.getElementById("formError");
  formError.style.display = 'block';

  // 2. 创建错误标题（只创建一次）
  const title = document.createElement("h2");
  title.appendChild(document.createTextNode("Fix these issues:"));
  errorTitle.appendChild(title);

  // 验证邮箱
  const email = form["email"].value;
  if (email === "") {
    hasError = true;
    const para = document.createElement("p");
    para.appendChild(document.createTextNode("* Email must not be left blank."));
    errorParagraph.appendChild(para);
  }

  // 3. 单独验证邀请码，不再嵌套在邮箱判断里
  const code = form["code"].value;
  if (code === "") {
    hasError = true;
    const para = document.createElement("p");
    para.appendChild(document.createTextNode("* Invite code must not be left blank."));
    errorParagraph.appendChild(para);
  }

  // 如果有错误，显示提示并阻止表单提交
  if (hasError) {
    setTimeout(function() {
      $('#formError').fadeOut('slow');
    }, 5000);
    return false;
  }

  // 如果没有错误，允许表单提交（这里可以根据需求添加后续逻辑）
  return true;
}

对应的HTML部分保持不变即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--div for form errors-->
<div id='container'>
 <div class='formError' id='formError'>
 <h1 id='errorTitle'></h1>
 <p id='errorParagraph'></p>
 </div>
</div>
<!--login form-->
<form id='loginForm' action='#' method='post'>
 <h1 class='formTitle formText'>T O E A I M</h1>
 <p class='formParagraph formText'>Purchase CS:GO Cheats and more!</p>
 <div class='inputForm'>
 <label class='formLabel'>
 <input type='email' placeholder='Enter your Email Address' name='email' autocomplete='off'>
 </label>
 <label class='formLabel'>
 <input type='password' placeholder='Enter your Invite Code' name='code' autocomplete='off'>
 </label>
 <button type='submit' class='formBtn'>Register</button><br>
 <span class='noLogin'><a href='#' class='noLoginText'>Don't have a code?</a> or <a href='#' class='noLoginText'>Already have an account?</a></span>
 </div>
</form>

为什么之前的方法没用？ #

• 布尔值方法：如果executed变量是在函数内部声明的，每次调用函数都会重置为false，所以无法阻止重复执行；如果放在全局作用域，又会导致第一次验证后，后续的验证都无法执行，显然不符合需求。
• setTimeout包裹代码：这个方法本身和阻止重复生成元素无关，而且你遇到的页面刷新是因为表单提交没有被正确阻止，return false的位置不对导致的。

现在修改后的代码，每次点击提交按钮时，都会先清空旧的错误内容，然后重新生成当前的错误提示，不会再出现重复元素的问题，同时也能正确阻止表单刷新。

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