对空的innerhtml元素进行显示隐藏工作

Question

我有一个名字不带空格和电话号码的表格。

我设法使表格和错误消息起作用，但是当其中没有消息时，我找不到隐藏错误信息的方法。它的工作是隐藏其他后续错误消息，但不是第一个，我是通过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;
}

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