Question

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

如果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);
}());

Answer 1

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

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

Answer 2

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

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

更好的解决方案是在检查空字段之前检查confirmEmail匹配email，如果已添加其他错误消息，则不添加“不能为空”消息。

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

2 个答案: