当我多次单击“提交”按钮时，我多次收到错误消息

Question

我正在尝试使用javascript验证表单。当输入字段为空时，我希望错误消息显示在相应标签的旁边。我能够实现这一点，但是当我多次单击提交按钮时，我多次收到错误消息。即使我多次单击提交按钮，我也希望错误仅显示一次。

我尝试使用if / else来检查错误元素是否已经存在。

//form validation

let formEl = document.getElementById('myForm');
let formInput = document.getElementsByTagName('input');
//let submitBtn = document.getElementById('submit');
let error = document.getElementById('error');


formEl.addEventListener('submit', function(event) {
  event.preventDefault();

  for (let i = 0; i < formInput.length; i++) {
    let errorEl = document.createElement('SPAN');
    errorEl.innerHTML = 'Error: ' + formInput[i].name + ' is missing';
    errorEl.setAttribute("style", "color: red; font-weight: normal; font-size: 12px;");

    if (formInput[i].value == '') {

      formInput[i].before(errorEl);
      formInput[i].setAttribute('style', "border: 1px solid red;");

    } else {
      formInput[i].before();

    }
  }

}, true);

<form id="myForm" name="myForm" method="post">
  <label for="fname">First Name:  <input type="text" id="fname" name="first name"></label>
  <label for="lname">Last Name: <input type="text" id="lname" name="last name"></label>
  <label for="fname">Email: <input type="email" id="email" name="email"></label>
  <label for="phone">Phone: <input type="tel" id="phone" name="phone"></label>
  <button type="submit" value="Submit" id="submit">Submit</button>

</form>

错误多次显示

Answer 1

我添加的样式纯粹是为了这个示例。不过，我确实向错误元素添加了一个“错误”类，以使其在检查其存在时易于识别（因此，将来标记更改时，我们不会偶然删除其他任何元素，而不是使用{ {1}}作为选择器，甚至是span之类的东西。）

现在，我们可以检查错误元素是否已经存在，并且仅添加一个不存在的错误元素。一旦该字段不再为空，我还添加了错误消息的消除和边框颜色的重置。

注意：Internet Explorer不支持previousElementSibling()，因此，如果需要支持，则需要为此找到解决方法/填充。

closest()

//form validation

let formEl = document.getElementById('myForm');
let formInput = document.getElementsByTagName('input');
//let submitBtn = document.getElementById('submit');
let error = document.getElementById('error');


formEl.addEventListener('submit', function(event) {
  event.preventDefault();

  for (let i = 0; i < formInput.length; i++) {
    var prevSibling = formInput[i].previousElementSibling;
    var label = formInput[i].closest('label');
    var hasError = label.querySelector('.error');

    if (formInput[i].value == '') {
      if (!hasError) {
        let errorEl = document.createElement('SPAN');
        errorEl.innerHTML = 'Error: ' + formInput[i].name + ' is missing';
        errorEl.setAttribute("style", "color: red; font-weight: normal; font-size: 12px;");
        errorEl.className = 'error';
        formInput[i].before(errorEl);
        formInput[i].setAttribute('style', "border: 1px solid red;");
      }
    } else if (hasError) {
      prevSibling.parentElement.removeChild(prevSibling);
      formInput[i].style.border = '';
    }
  }

}, true);

label,
input,
.error {
  display: block;
}