Остановить дублирование элементов HTML DOM при повторной отправке формы

Question

Я создаю форму входа в систему с настраиваемым предупреждением, которое показывает, когда пользователи вводят неверные данные в поле ввода. Однако я столкнулся с проблемой. Всякий раз, когда пользователь нажимает кнопку «Зарегистрироваться», мой код Javascript дублирует элементы, а не создает его только один раз (что я и хочу).

Следовательно, это означает, что пользователь может «нажать спам». «и создайте бесконечное количество Javascript -генерированных HTML элементов. Это очевидно проблема. Я пытался использовать логические значения, чтобы остановить выполнение функции после первого запуска:

var executed = false;
if (!executed) {
   executed = true;
   continue;
}

Однако, что , похоже, не работает . Я также попытался обернуть код с

setTimeout(function(){
//my code here
}, 5000);

, и это также , кажется, не работает и просто обновляет страницу по щелчку.

Так что мой вопрос,

как я могу сделать элемент только один раз при вызове функции и прекратить дублирование элементов при повторной отправке формы?

Я использую XAMPP в качестве тестового сервера, если это значит что угодно.

//validate form
function validateForm() {
  //validate email
  document.getElementById("formError").style.display = 'block';
  var title = document.createElement("h2");
  var titleText = document.createTextNode("Fix these issues:");
  title.appendChild(titleText);
  var errorTitle = document.getElementById("errorTitle");
  errorTitle.classList.add("errorTitle");
  errorTitle.appendChild(title);

  var email = form["email"].value;

  if (email === "") {
    var para = document.createElement("p");
    var paraText = document.createTextNode("* Email must not be left blank.");
    para.appendChild(paraText);
    var errorParagraph = document.getElementById("errorParagraph");
    errorParagraph.classList.add("errorParagraph");
    errorParagraph.appendChild(para);

    //validate code
    var code = form["code"].value;

    if (code === "") {
      var para = document.createElement("p");
      var paraText = document.createTextNode("* Invite code must not be left blank.");
      para.appendChild(paraText);
      var errorParagraph = document.getElementById("errorParagraph");
      errorParagraph.classList.add("errorParagraph");
      errorParagraph.appendChild(para);

      setTimeout(function() {
        $('#formError').fadeOut('slow');
      }, 5000);
    }
  return false;
  }
}

var form = document.getElementById("loginForm");
form.onsubmit = validateForm;

<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>

Answer 1

Не добавляйте в DOM, если вы можете просто переключать существующие HTML

В качестве альтернативы просто добавьте обязательные для поля электронной почты и поля кода

$(function() {
  $("#loginForm").on("submit", function(e) {
    var email = $(this).find("[name=email]").val();
    var invite = $(this).find("[name=code]").val();

    $("#emailError").toggle($.trim(email) === "");
    $("#inviteError").toggle($.trim(invite) === "")
    if ($("#emailError").is(":visible") ||
      $("#inviteError").is(":visible")) {
      e.preventDefault();
      setTimeout(function() {
        $('.formError').fadeOut('slow');
      }, 5000);
    }
  })
})

.formError {
  display: none
}

<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='emailError'>
    <h1>* Email must not be left blank.</h1>
  </div>
  <div class='formError' id='inviteError'>
    <h1>* Invite code must not be left blank.</h1>
  </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>