Javascript 尝试在表单验证的输入值为空时显示文本

我第一次潜入表单验证。现在，当任何输入框中都有空值时，边框会以红色高亮显示

然而，我试图在每个输入框下面显示一条消息，其中包含相应的错误，但没有成功。我在每个函数的条件中添加了这行代码

我想知道是否有人可以看一看，看看是什么错了，为什么没有显示信息

函数customerFormValidation（）{
原因=”；
原因+=验证名称（客户名称）；
原因+=验证邮件（客户表格电子邮件）；
原因+=验证电话（客户电话）；
原因+=验证地址（客户地址）；
原因+=有效性（客户所在城市）；
原因+=不动产（客户形式状态）；
原因+=validateZip（customer_form.zip）；
控制台日志（原因）；
如果（原因长度>0）{
返回false；
}否则{
返回false；
}
}
函数validateName（名字）{
var误差=”；
如果（firstname.value==“”）{
document.getElementById（“firstname”）.style.display=“block”；
document.getElementById（“firstname”）.innerText=“请输入您的名字”；
document.getElementById（“firstname”）.style.borderColor=“红色”；
document.getElementById（“firstname”）.focus（）；
}否则{
firstname.style.background='White'；
document.getElementById（'firstname'）。innerHTML=“”；
}
返回误差；
}
功能验证电子邮件（电子邮件）{
var误差=”；
如果（email.value==“”）{
document.getElementById（“email”）.style.display=“block”；
document.getElementById（“电子邮件”）.innerText=“请输入电子邮件地址”；
document.getElementById（“电子邮件”）.style.borderColor=“红色”；
document.getElementById（“email”）.focus（）；
}否则{
email.style.background='White'；
document.getElementById（'email'）.innerHTML=“”；
}
返回误差；
}
功能验证电话（电话）{
var误差=”；
如果（phone.value==“”）{
document.getElementById（“电话”）.style.display=“块”；
document.getElementById（“电话”）.innerText=“请输入电话号码”；
document.getElementById（“电话”）.style.borderColor=“红色”；
document.getElementById（“电话”）.focus（）；
}否则{
phone.style.background=“白色”；
document.getElementById（“电话”）.innerHTML=“”；
}
返回误差；
}
功能验证地址（地址）{
var误差=”；
如果（address.value==“”）{
document.getElementById（“地址”）.style.display=“块”；
document.getElementById（“地址”）.innerText=“请输入地址”；
document.getElementById（“地址”）.style.borderColor=“红色”；
document.getElementById（“地址”）.focus（）；
}否则{
address.style.background=“白色”；
document.getElementById（“地址”）.innerHTML=“”；
}
返回误差；
}
功能验证（城市）{
var误差=”；
如果（address.value==“”）{
document.getElementById（“城市”）.style.display=“块”；
document.getElementById（“城市”）.innerText=“请输入您的城市”；
document.getElementById（“城市”）.style.borderColor=“红色”；
document.getElementById（“城市”）.focus（）；
}否则{
city.style.background=“白色”；
document.getElementById（“城市”）.innerHTML=“”；
}
返回误差；
}
职能部门（州）{
var误差=”；
如果（state.value==“”）{
document.getElementById（“state”）.style.display=“block”；
document.getElementById（“state”）.innerText=“请输入您的状态”；
document.getElementById（“state”）.style.borderColor=“红色”；
document.getElementById（“state”）.focus（）；
}否则{
state.style.background=“白色”；
document.getElementById（“state”）.innerHTML=“”；
}
返回误差；
}
函数validateZip（zip）{
var误差=”；
如果（zip.value==“”）{
document.getElementById（“zip”）.style.display=“block”；
document.getElementById（“zip”）.innerText=“请输入您的邮政编码”；
document.getElementById（“zip”）.style.borderColor=“红色”；
document.getElementById（“zip”）.focus（）；
}否则{
zip.style.background=“白色”；
document.getElementById（“zip”）.innerHTML=“”；
}
返回误差；
}

帐单地址
全名
电子邮件
电话#
住址
城市
状态
拉链
下一个

您试图输入

内部文本的元素是实际的输入字段。您必须为每个输入字段添加一个额外的元素。在
firstname
的示例中：

<input type="text" id="firstname" name="firstname" placeholder="John M. Doe">
<div id="firstnameError" style="display: none"></div>

其他领域也是如此。除此之外，您的代码似乎很好。
您在哪里定义第一个函数中使用的变量
customer\u form
？
document.getElementById("firstnameError").style.display = "block";
document.getElementById("firstnameError").innerText = "Please enter your first name";
document.getElementById("firstnameError").style.borderColor = "red";