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

【问题标题】：Validate Form - Multiple Error Messages Appearing验证表单 - 出现多个错误消息
【发布时间】：2014-04-25 11:22:04
【问题描述】：

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

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

我的问题是，如果您在所有字段为空时点击提交按钮，然后在email 输入中输入一个值，但将 confirmEmail 留空并再次点击提交，则两个错误消息都会出现在 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);
}());

【问题讨论】：

标签： javascript validation

【解决方案1】：

I forked your fiddle. 我所做的是使用innerHtml 并仅替换标签的文本，而不是创建新的跨节点并将它们附加到文档中。

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

【讨论】：

谢谢！我什至不确定我为什么要考虑添加一个额外的跨度标签。

【解决方案2】：

Another solution 是在添加“电子邮件不匹配”消息之前添加此消息：

var oldSpan = labelElement.parentNode.getElementsByTagName('span')[0];
removeElement(oldSpan);

更好的解决方案是在检查空字段之前检查 confirmEmail 是否与 email 匹配，如果已经添加了另一条错误消息，则不要添加“不能为空”消息。

【讨论】：