使用JavaScript的空表单字段的单个错误消息

我需要使用JavaScript验证我的表单，因为iPhone/Safari无法识别

required

属性。我希望在每个空的

输入
字段下方显示单独的错误消息

我的代码可以工作，但在填写字段时，单个错误消息不会消失。此外，我希望所有消息最初都显示在所有空字段中（而不是逐个显示）。对不起，我对JavaScript非常陌生

我的HTML：

<form onsubmit="return validateForm()" method="post" action="form.php" name="english_registration_form" id="english_registration_form">
        <input type="text" id="name" name="name" aria-describedby="name-format" required placeholder="Name">
        <span class="error"><p id="name_error"></p></span>
        <input type="email" id="email" name="email" required placeholder="Email">
        <span class="error"><p id="email_error"></p></span>
        <input type="tel" id="telephone" name="telephone" required placeholder="Telephone">
        <span class="error"><p id="telephone_error"></p></span>
        <button class="register_button" type="submit" value="submit">Register Now</button>
    </form>





现在注册

还有我的JavaScript：

<script>
function validateForm() {
var x = document.forms["english_registration_form"]["name"].value;
var y = document.forms["english_registration_form"]["email"].value;
var z = document.forms["english_registration_form"]["telephone"].value;

if (x == null || x == "") {
    nameError = "Please enter your name";
    document.getElementById("name_error").innerHTML = nameError; 
    return false;
} 

else if (y == null || y == "") {
    emailError = "Please enter your email";
    document.getElementById("email_error").innerHTML = emailError;
    return false;
} 

else if (z == null || z == "") {        
    telephoneError = "Please enter your telephone";
    document.getElementById("telephone_error").innerHTML = telephoneError;
    return false;
} 

else {return true;}
}
</script>


函数validateForm（）{
var x=document.forms[“english\u registration\u form”][“name”]。值；
var y=文件.表格[“英语注册表格”][“电子邮件”].值；
var z=文件。表格[“英语注册表格”][“电话”]。值；
如果（x==null | | x==“”）{
nameError=“请输入您的姓名”；
document.getElementById（“name_error”）.innerHTML=nameError；
返回false；
} 
else如果（y==null | | y==“”）{
emailError=“请输入您的电子邮件”；
document.getElementById（“email_error”）.innerHTML=emailError；
返回false；
} 
else如果（z==null | | z==“”）{
电话错误=“请输入您的电话”；
document.getElementById（“电话错误”）.innerHTML=电话错误；
返回false；
} 
else{return true；}
}

谢谢您的帮助。
您必须使用
style.display=“none”
来隐藏错误
和
style.display=“block”
显示错误

 <script>
    function validateForm() {
    var x = document.forms["english_registration_form"]["name"].value;
    var y = document.forms["english_registration_form"]["email"].value;
    var z = document.forms["english_registration_form"]["telephone"].value;

    if (x == null || x == "") {
        nameError = "Please enter your name";
document.getElementById("name_error").style.display="block";
        document.getElementById("name_error").innerHTML = nameError; 
        return false;
    } 
    else if (x != null || x != "") {
        nameError = "Please enter your name";
        document.getElementById("name_error").style.display="none"; 
        return false;
    } 

     if (y == null || y == "") {
        emailError = "Please enter your email";
 document.getElementById("email_error").style.display="block"; 
        document.getElementById("email_error").innerHTML = emailError;
        return false;
    } 
    else if (y != null || y != "") {
        emailError = "Please enter your email";
        document.getElementById("email_error").style.display="none"; 
        return false;
    } 

     if (z == null || z == "") {        
        telephoneError = "Please enter your telephone";
 document.getElementById("telephone_error").style.display="block"; 
        document.getElementById("telephone_error").innerHTML = telephoneError;
        return false;
    } 

     else if (z != null || z != "") {        
        telephoneError = "Please enter your telephone";
        document.getElementById("telephone_error").style.display="none"; 
        return false;
    } 

    else {return true;}
    }
    </script>


函数validateForm（）{
var x=document.forms[“english\u registration\u form”][“name”]。值；
var y=文件.表格[“英语注册表格”][“电子邮件”].值；
var z=文件。表格[“英语注册表格”][“电话”]。值；
如果（x==null | | x==“”）{
nameError=“请输入您的姓名”；
document.getElementById（“name\u error”）.style.display=“block”；
document.getElementById（“name_error”）.innerHTML=nameError；
返回false；
} 
else如果（x！=null | | x！=“”）{
nameError=“请输入您的姓名”；
document.getElementById（“name\u error”）.style.display=“无”；
返回false；
} 
如果（y==null | | y==“”）{
emailError=“请输入您的电子邮件”；
document.getElementById（“email\u error”）.style.display=“block”；
document.getElementById（“email_error”）.innerHTML=emailError；
返回false；
} 
else如果（y！=null | | y！=“”）{
emailError=“请输入您的电子邮件”；
document.getElementById（“电子邮件错误”）.style.display=“无”；
返回false；
} 
如果（z==null | | z==“”）{
电话错误=“请输入您的电话”；
document.getElementById（“电话错误”）.style.display=“block”；
document.getElementById（“电话错误”）.innerHTML=电话错误；
返回false；
} 
else如果（z！=null | | z！=“”）{
电话错误=“请输入您的电话”；
document.getElementById（“电话错误”）.style.display=“无”；
返回false；
} 
else{return true；}
}
这是一个解决方案，它在首次提交表单时显示所有相关错误，并在用户修改相关输入元素中的文本时删除错误

为了让它在第一次运行时显示所有错误，我使用了
if
语句而不是
if else
，并使用了一个标志来确定是否应该提交表单。为了在修改输入时删除警告，我绑定了输入的
onkeyup
事件

最后，我删除了输入上的
必需属性
，以便在支持这些属性的现代浏览器中进行演示

现场演示：


document.getElementById（“英语注册表单”）.onsubmit=function（）{
var x=document.forms[“english\u registration\u form”][“name”]。值；
var y=文件.表格[“英语注册表格”][“电子邮件”].值；
var z=文件。表格[“英语注册表格”][“电话”]。值；
var submit=true；
如果（x==null | | x==“”）{
nameError=“请输入您的姓名”；
document.getElementById（“name_error”）.innerHTML=nameError；
提交=错误；
}
如果（y==null | | y==“”）{
emailError=“请输入您的电子邮件”；
document.getElementById（“email_error”）.innerHTML=emailError；
提交=错误；
}
如果（z==null | | z==“”）{
电话错误=“请输入您的电话”；
document.getElementById（“电话错误”）.innerHTML=电话错误；
提交=错误；
}
返回并提交；
}
函数removeWarning（）{
document.getElementById（this.id+“_error”）.innerHTML=“”；
}
document.getElementById（“name”）.onkeyup=removeWarning；
document.getElementById（“email”）.onkeyup=removeWarning；
document.getElementById（“电话”）.onkeyup=removeWarning




现在注册
首先，我们更改您的函数
validateForm
，以便它可以处理多个验证

然后，我们在文档上创建一个
DOMContentLoaded
事件处理程序，并调用
validateForm
函数，以便在加载页面时验证字段

最后，我们在输入上创建
input
事件处理程序，这样每当有人更改其中的任何数据时，表单都会再次验证

看看注释的代码，看看正在运行的工作版本


函数validateForm（）{
var valid=true；//创建一个布尔变量，如果表单有效，则返回该变量
如果（！validateField（this，'name'））//验证名称
有效=错误；
如果