如果出现错误消息，则需要修改函数
一个简单的"if"语句可能就足以满足您的需求
我有一个表单，它接受一个没有空格的名字和一个电话号码。
我设法使表单和错误消息正常工作，但当其中没有消息时，我找不到隐藏错误的方法。它可以隐藏其他后续错误消息，但不是第一条，我通过Chrome的调试工具发现了这一点。
我试着遍历所有元素，找到一个空白的innerHTML并隐藏错误样式，但它不起作用，找不到它
有办法吗？这是代码：
window.onload = function () {
let form = document.getElementById("formDetails");
form.addEventListener("submit", function (event) {
let haltSubmission = false;
cleanPhoneError();
cleanNameError();
for (let i = 0; i < form.elements.length; i++) {
if (!nameCheck(form.elements[i])) {
haltSubmission = true;
} else if (!matchingPhone(form, form.elements[i])) {
haltSubmission = true;
} else if (!lengthOfPhone(form.elements[i])) {
haltSubmission = true;
}
}
if (haltSubmission) {
event.preventDefault();
}
}, false);
}
function nameCheck(formInput) {
if (formInput.id === "name") {
let value = formInput.value, error = "", letters = /^[a-zA-Z]+$/,
characters = /^[a-zA-Z0-9!@#$%^&*)(+=._-]+$/g;
if (value === null || value === "") {
error = "This field is empty.";
}
if (value !== "") {
if (value.length < 3) {
error = "This field has less than 3 characters.";
}
if (!value.match(letters)) {
error = "Numbers detected. Please write your first name.";
}
if (!value.match(characters)) {
error = "Special characters detected. Please write your first name.";
}
}
errorMessage(formInput, error);
}
return true;
}
function matchingPhone(form, formInput) {
if (formInput.id === "phone") {
let error = "";
let phone = form.phone.value;
let retypedPhone = form.retypedphone.value;
if (phone === retypedPhone) {
return true;
} else {
error = "Phone numbers do not match.";
phoneError(error);
return false;
}
}
return true;
}
function lengthOfPhone(formInput) {
if (formInput.id === "phone") {
let value = formInput.value, error = "";
if (value === null || value === "") {
error = "This field is empty.";
phoneError(error);
return false;
} else if (value !== "") {
if (value.length < 11) {
error = "Invalid phone number, it has than 11 numbers.";
phoneError(error);
return false;
}
}
}
return true;
}
function errorMessage(selected, error) {
let elem = document.createElement("span");
elem.setAttribute("id", "nameError");
elem.setAttribute("class", "error");
let text = document.createTextNode(error);
elem.appendChild(text);
selected.parentNode.insertBefore(elem, selected.nextSibling);
return selected;
}
function phoneError(error) {
let phoneError = document.getElementById("phoneError");
phoneError.setAttribute("class", "error");
phoneError.innerHTML = error;
}
function cleanPhoneError() {
let error = document.getElementsByTagName("span");
for (let i = 0; i < error.length; i++) {
error[i].innerHTML = "";
}
}
function cleanNameError() {
let error = document.getElementById("nameError");
let errorMessage = document.getElementsByTagName("span");
for (let i = 0; i < errorMessage.length; i++) {
if (errorMessage[i].id === "nameError") {
error.style.display = "none";
}
}
}label, button {
display: block;
margin: 10px 0 5px 0;
}
input, button {
padding: 8px;
width: 393px;
font-size: 16px;
}
body, button{
font-family: Arial, sans-serif;
}
.error{
color: #FFF;
display: block;
margin: 0 0 15px 0;
background: #990000;
padding: 5px 3px 5px 5px;
width: 405px;
line-height: 25px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link rel="stylesheet" href="css/test.css">
<script src="js/test.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section>
<h1>Form</h1>
<div id="form">
<form id="formDetails" action="confirm.html">
<div>
<label for="name">* Name:</label>
<input type="text" id="name">
</div>
<div>
<label for="phone">* Phone Number</label>
<input type="phone" id="phone">
</div>
<div>
<label for="retypedphone">* Retype Phone Number:</label>
<input type="phone" id="retypedphone">
<span id="phoneError"></span>
</div>
<div>
<button type="submit" id="submitbtn">Submit</button>
</div>
</form>
</div>
</section>
</body>
</html>errorMessage(...)以仅追加元素更新
根据评论，我重新编写了隐藏/显示错误逻辑，请看一看。我觉得这也更可读一点
请参阅下面的演示
function cleanPhoneError() {
hideElement("phoneError");
}
function hideElement(elementName) {
let elementObj = document.getElementById(elementName);
if (elementObj) {
elementObj.innerHTML = "";
elementObj.setAttribute("class", "hidden");
}
}
window.onload = function() {
let form = document.getElementById("formDetails");
form.addEventListener("submit", function(event) {
let haltSubmission = false;
cleanErrors();
if (!validName()) {
haltSubmission = true;
}
if (!validPhone()) {
haltSubmission = true;
}
if (haltSubmission === true) {
event.preventDefault();
}
}, false);
}
function cleanErrors() {
cleanPhoneError();
cleanNameError();
}
function validName() {
let nameObj = document.getElementById("name");
if (nameObj) {
let value = nameObj.value,
error = "",
letters = /^[a-zA-Z]+$/,
numbers = /[0-9]+/,
characters = /[!@#$%^&*)(+=._-]+/g;
if (value === null || value === "") {
error = "This field is empty.";
} else if (value.length < 3) {
error = "This field has less than 3 characters.";
} else if (value.match(characters)) {
error = "Special characters detected. Please write your first name.";
} else if (value.match(numbers)) {
error = "Numbers detected. Please write your first name.";
}
if (error !== undefined && error.trim() !== '') {
displayErrorMessage(error, "nameError");
return false;
}
return true;
}
displayErrorMessage("Unable to find Name field.", "nameError");
return false;
}
function validPhone() {
let phoneObj = document.getElementById("phone");
let retypedPhoneObj = document.getElementById("retypedPhone");
if (phoneObj && retypedPhoneObj) {
let phoneValue = phoneObj.value;
let retypedPhoneValue = retypedPhoneObj.value;
if (phoneValue !== retypedPhoneValue) {
displayErrorMessage("Phone numbers do not match.", "phoneError");
return false;
} else {
return validateLengthOfPhone(phoneValue);
}
} else {
displayErrorMessage("Unable to find Phone fields.", "phoneError");
return false;
}
return true;
}
function validateLengthOfPhone(value) {
let error = "";
if (value === null || value === "") {
error = "This field is empty.";
displayErrorMessage(error, "phoneError");
return false;
} else if (value.length < 11) {
error = "Invalid phone number, it has less than 11 numbers.";
displayErrorMessage(error, "phoneError");
return false;
}
return true;
}
function displayErrorMessage(errorMsg, elementName) {
if (errorMsg !== undefined && errorMsg.trim() !== '') {
let elementError = document.getElementById(elementName);
elementError.setAttribute("class", "error visible");
elementError.innerHTML = errorMsg;
}
}
function cleanPhoneError() {
hideElement("phoneError");
}
function cleanNameError() {
hideElement("nameError");
}
function hideElement(elementName) {
let elementObj = document.getElementById(elementName);
if (elementObj) {
elementObj.innerHTML = "";
elementObj.setAttribute("class", "hidden");
}
}label,
button {
display: block;
margin: 10px 0 5px 0;
}
input,
button {
padding: 8px;
width: 393px;
font-size: 16px;
}
body,
button {
font-family: Arial, sans-serif;
}
.error {
color: #FFF;
display: block;
margin: 0 0 15px 0;
background: #990000;
padding: 5px 3px 5px 5px;
width: 405px;
line-height: 25px;
display: none;
}
.visible {
display: inline-block;
}
.hidden {
display: none;
}<section>
<h1>Form</h1>
<div id="form">
<form id="formDetails" action="confirm.html">
<div>
<label for="name">* Name:</label>
<input type="text" id="name">
<span id="nameError" class="error"></span>
</div>
<div>
<label for="phone">* Phone Number</label>
<input type="phone" id="phone">
</div>
<div>
<label for="retypedphone">* Retype Phone Number:</label>
<input type="phone" id="retypedPhone">
<span id="phoneError" class="error"></span>
</div>
<div>
<button type="submit" id="submitbtn">Submit</button>
</div>
</form>
</div>
</section>