javascript - 验证表单-出现多个错误消息

我正在尝试编写纯JavaScript表单验证，如果label为空，它将在input元素旁边添加错误消息。

如果confirmEmail input与电子邮件input不匹配，则会收到其他错误消息

我的问题是，如果在所有字段都为空时单击提交按钮，然后在email输入中输入一个值，但将ConfirmEmail保留为空并再次单击Submit，则两个错误消息都将显示在confirmEmail的标签旁边。理想的结果是，confirmEmail仅包含“电子邮件不匹配”的文字

这是一个小提琴：http://jsfiddle.net/R5e2T/

这是我的HTML：

<div id="theForm">
  <div>
    <label for="firstName">First Name:</label>
    <br>
    <input type="text" id="firstName" name="first" value="" />
  </div>

  <div>
    <label for="lastName">Last Name:</label>
    <br>
    <input type="text" id="lastName" name="last" value="" />
  </div>

  <div>
    <label for="email">Email:</label>
    <br>
    <input type="email" id="email" name="email" value="" />
  </div>

  <div>
    <label for="confirmEmail">Confirm Email:</label>
    <br>
    <input type="text" id="confirmEmail" name="confirmEmail" value="" />
  </div>

  <button type="button" id="submitButton">Submit</button>
</div>

这是我的JavaScript：

function validate () {
  var theForm = document.getElementById('theForm'),
      firstName = document.getElementById('firstName'),
      lastName = document.getElementById('lastName'),
      email = document.getElementById('email'),
      confirmEmail = document.getElementById('confirmEmail'),
      label = theForm.getElementsByTagName('label'),
      input = theForm.getElementsByTagName('input'),
      inputLength = input.length;

  // Remove any spans that may have been added by the next for loop
  for (var x = 0; x < inputLength; x++) {
     var currLbl = label[x];
     if ( currLbl.parentNode.getElementsByTagName('span').length > 0 ) {
        var span = currLbl.parentNode.getElementsByTagName('span')[0];
        removeElement(span);
    }
  }

  // Error checking for the form.
  // Add error message next to any element that has a blank value.
  for (var i = 0; i < inputLength; i++) {
    // innerText for IE, textContent for other browsers
    var labelText = label[i].innerText || label[i].textContent;
    var currLabel = label[i];
    var text = document.createTextNode( labelText + ' cannot be empty');

    if ( input[i].value === '' ) {
        currLabel.parentNode.style.color = 'red';
        currLabel.insertAdjacentHTML('afterend', ' <span>cannot be empty</span>');

    }
    else if ( input[i].value !== '') {
        currLabel.parentNode.style.color = '';
    }
  }

  // Test to see if confirmEmail is equal to email.
  // If not add a warning message next to confirmEmail's label
  if (confirmEmail.value !== email.value) {
    var labelElement = confirmEmail.parentNode.getElementsByTagName('label')[0]
    labelElement.insertAdjacentHTML('afterend', ' <span>Email does not match</span>');
    labelElement.parentNode.style.color = 'red';
  }

  // Test to make sure all inputs have a value,
  // and that confirmEmail equals email.
  if (firstName.value !== '' && lastName.value !== '' && email.value !== '' && confirmEmail.value !== '' && email.value === confirmEmail.value) {
    alert("Submitted!!!");
    return true;
  } else {
    return false;
  }

};

// Remove Element function
function removeElement(node) {
  node.parentNode.removeChild(node);
}
(function () {
  var button = document.getElementById('submitButton');
  button.addEventListener('click', validate, false);
}());

最佳答案

I forked your fiddle.
我所做的是使用innerHtml并替换标签的文本，而不是创建新的span-nodes并将其附加到文档中。

我将原始标签（如“电子邮件”）存储在数据集变量中，以便以后可以重置标签。