我已经成功地创建了JS表单的验证（欢迎您提出任何其他的实现方法），但是我想我在这里的逻辑中遗漏了一些东西。
如果我按下按钮验证表单，而整个表单都是空的，则只显示我创建的1个错误范围（始终是第一个），我如何才能正确地实现这一点，以便在单击按钮后显示表单中的所有错误？
JS功能：

function validateForm() {
    var errorText;
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var emailAdd = document.getElementById("email").value;
    var phone = document.getElementById("phone").value;
    var span_error = document.getElementById("span_error");

    /*Span Style*/
    span_error.style.padding = "2px 5px";
    span_error.style.display = "block";
    span_error.style.background = "#f9a5a5";
    span_error.style.color = "#666";
    
    
    if(firstName.length < 2){
        errorText = "Please enter a valid name";
        span_error.innerHTML = errorText;
        return false;
    }

    if(lastName.length < 2){
        errorText = "Please enter a valid name";
        span_error.innerHTML = errorText;
        return false;
    }
    /*isNan == is not a number , or the phone length is not equal to 10*/
    if(isNaN(phone) || phone.length != 9){
        errorText = "Please Enter valid Phone Number";
        span_error.innerHTML = errorText;
        return false;
    }

    if(emailAdd.indexOf("@") == -1 || emailAdd.length < 6){
        errorText = "Please Enter valid Email";
        span_error.innerHTML = errorText;
        return false;
    }

    alert("Good");
    return true;
}

部分表格举例：

<form action="" id="myform" onsubmit="return validateForm();">
<p>
        <input
          id="firstName"
          name="firstName"
          type="text"
          placeholder="Please type your first Name here"
        />
        <span id="span_error"></span>
</p>
<p>
        <input
          id="email"
          name="email"
          type="email"
          placeholder="Please type your email here"
        />
        <span id="span_error"></span>
      </p>
          <p>
        <input type="submit" value="Create My Account" id="submit" />
      </p>

</form>