当我多次单击提交按钮时，出现多次错误

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

我添加的样式仅出于此示例的目的。 但是，我确实向错误元素添加了一个“错误”类，以使其在检查其存在时易于识别（因此，如果将来标记发生更改，我们不会偶然删除其他任何元素，而不是使用span作为选择器，甚至是诸如previousElementSibling()类的东西。

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

注意：Internet Explorer不支持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; } 

 <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>