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

Question

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

如果确认电子邮件输入与电子邮件输入不匹配，则会收到一条附加错误消息

我的问题是，如果您在所有字段都为空时点击“提交”按钮，然后在“电子邮件”输入中输入一个值，但将“确认电子邮件”留空并再次点击“提交”，则两条错误消息都会出现在确认电子邮件的标签。理想的结果是，confirmEmail 仅包含“电子邮件不匹配”的文本

这是一个 fiddle :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);
}());

Answer 1

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

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