Question

我正在使用 HTML、Bootstrap 和 JavaScript 构建我的第一个联系表单：

我目前正在尝试验证我的输入表单。
如果缺少任何输入，我已成功停止表单提交，但我输入所有输入后，我无法提交表单。
请在 vanilla js 中为我提供解决方案。

moz-extension+++

document.getElementById("myForm").addEventListener("submit", function(evt) {
  evt.preventDefault();
  var error = "";
  if (document.getElementById("email").value == "") {
    error += "The email field is required.<br>";
  }

  if (document.getElementById("subject").value == "") {
    error += "The subject field is required.<br>";
  }

  if (document.getElementById("content").value == "") {
    error += "The content field is required.<br>";
  }

  if (error != "") {
    document.getElementById("error").innerHTML = '<div class="alert alert-danger" role="alert"><p><strong>There were error(s) in your form:</strong></p>' + error + '</div>';
    return false;
  } else {
    document.getElementById("myForm").removeEventListener("submit", function() {
      return true;
    });
  }
});

Answer 1

如果您想使用脚本提交表单，请永远不要调用任何 name="submit" 或 id="submit"
仅使用 preventDefault 停止提交
我建议你使用一个数组和一个隐藏类

document.getElementById("myForm").addEventListener("submit", function(evt) {
  let error = [];
  if (document.getElementById("email").value == "") {
    error.push("The email field is required.");
  }
  if (document.getElementById("subject").value == "") {
    error.push("The subject field is required.");
  }
  if (document.getElementById("content").value == "") {
    error.push("The content field is required.");
  }

  document.getElementById("error").classList.toggle("hide",error.length===0)
  if (error.length>0) {
    document.getElementById("msg").innerHTML = error.join("<br/>")
    evt.preventDefault();
  }
});

.hide { display:none;}

<div class="container">
  <p class="display-6">Get in Touch!</p>
  <div id="error" class="hide">
    <div class="alert alert-danger" role="alert">
      <p><strong>There were error(s) in your form:</strong></p>
      <p id="msg"></p>
    </div>
  </div>
  <form id="myForm" method="post">
    <div class="mb-3">
      <label class="form-label">Email address</label>
      <input id="email" type="email" name="email" class="form-control" placeholder="Enter Email">
      <p class="form-text">We'll never share your email with anyone else</p>
    </div>
    <div class="mb-3">
      <label class="form-label">Subject</label>
      <input id="subject" type="text" name="subject" class="form-control">
    </div>
    <div class="mb-3">
      <label class="form-label">What would you like to ask us?</label>
      <textarea id="content" type="text" name="body" class="form-control"></textarea>
    </div>
    <input name="subbutton" type="submit" class="btn btn-primary">
  </form>
</div>

或者只是在字段中添加必填

<div class="container">
  <p class="display-6">Get in Touch!</p>
  <form id="myForm" method="post">
    <div class="mb-3">
      <label class="form-label">Email address</label>
      <input id="email" type="email" name="email" class="form-control" placeholder="Enter Email" required>
      <p class="form-text">We'll never share your email with anyone else</p>
    </div>
    <div class="mb-3">
      <label class="form-label">Subject</label>
      <input id="subject" type="text" name="subject" class="form-control" required>
    </div>
    <div class="mb-3">
      <label class="form-label">What would you like to ask us?</label>
      <textarea id="content" type="text" name="body" class="form-control" required></textarea>
    </div>
    <input name="subbutton" type="submit" class="btn btn-primary">
  </form>
</div>

使用 vanilla js 进行表单验证

1 个答案: