如何在JavaScript中一次显示所有错误的for循环？

我目前正在进行JavaScript表单验证。对于单个元素，它将应用所有错误，但我的任务是一次循环所有元素并一次显示错误。有什么解决办法吗

<form action="" id="register" onsubmit="return validation()">
  Name<input type="text" id="name">
  <p id="error"></p>
  Email<input type="text" id="email">
  <p id="error"></p>
  Password<input type="text" id="password">
  <p id="error"></p>
  <input type="submit" name="submit" value="Submit">
</form>
<script>
  function validation() {
    if (document.getElementById('name').value=="") {
      document.getElementById("error").innerHTML="Please fill your name";
    }
    and so.. on..
  }
</script>

名称

电子邮件

密码

函数验证（）{
if（document.getElementById（'name'）。值==“”）{
document.getElementById（“error”）.innerHTML=“请填写您的姓名”；
}
等等
}

有谁能帮助我在用户单击submit Button时如何循环显示所有错误？

首先，创建一个错误框。这可以使用一个简单的div来完成

<div id="error-box" style="color: red"></div>

这将创建一个输入数组并逐个读取。如果任何字段为空，它将在错误框中返回错误。如果没有，则继续执行

或者您可以使用jQuery和验证插件。查看这里了解更多信息

快乐编码

首先，创建一个错误框。这可以使用一个简单的div来完成

<div id="error-box" style="color: red"></div>

这将创建一个输入数组并逐个读取。如果任何字段为空，它将在错误框中返回错误。如果没有，则继续执行

或者您可以使用jQuery和验证插件。查看这里了解更多信息

---

快乐编码

首先，同一文档中的

id

应该是唯一的，因此您必须用类替换重复的id，例如：

 Name<input type="text" id="name">
 <p class="error"></p>

 Email<input type="text" id="email">
 <p class="error"></p>

 Password<input type="text" id="password">
 <p class="error"></p>

希望这有帮助

$（'#register'）。在（'submit'，function（）上{
var submit=true；
如果（$（'#country'）.val（）='-1'）{
$（“#country”）.next（“.error”）.html（“请填写您的国家”）；
提交=错误；
}否则
$（“#country”）.next（“.error”）.html（”；
if（$（'#name'）.val（）=“”）{
$（“#name”）.next（“.error”）.html（“请填写您的姓名”）；
提交=错误；
}否则
$（'#name'）.next（“.error”）.html（“”）；
如果（$（'#email'）.val（）=“”）{
$（“#email”）.next（“.error”）.html（“请填写您的电子邮件”）；
提交=错误；
}否则
$（'#email'）.next（“.error”）.html（“”）；
if（$（“\password'）.val（）==”“）{
$（“#密码”）.next（“.error”）.html（“请填写您的密码”）；
提交=错误；
}否则
$（'#password'）.next（“.error”）.html（“”）；
如果（$（'[name=“check”]：checked'）。长度===0）{
$（'[name=“check”]：last'）.next（“.error”）.html（“请至少检查一个”）；
提交=错误；
}否则
$（'[name=“check”]'）。下一步（“.error”）.html（“”）；
返回并提交；
})

。错误{
颜色：红色；
}

国家
请选择国家
美国
澳大利亚
印度

名称

电子邮件

密码

复选框


检查1


支票2


支票3

首先，同一文档中的

id

应该是唯一的，因此您必须用类替换重复的id，例如：

 Name<input type="text" id="name">
 <p class="error"></p>

 Email<input type="text" id="email">
 <p class="error"></p>

 Password<input type="text" id="password">
 <p class="error"></p>

希望这有帮助

$（'#register'）。在（'submit'，function（）上{
var submit=true；
如果（$（'#country'）.val（）='-1'）{
$（“#country”）.next（“.error”）.html（“请填写您的国家”）；
提交=错误；
}否则
$（“#country”）.next（“.error”）.html（”；
if（$（'#name'）.val（）=“”）{
$（“#name”）.next（“.error”）.html（“请填写您的姓名”）；
提交=错误；
}否则
$（'#name'）.next（“.error”）.html（“”）；
如果（$（'#email'）.val（）=“”）{
$（“#email”）.next（“.error”）.html（“请填写您的电子邮件”）；
提交=错误；
}否则
$（'#email'）.next（“.error”）.html（“”）；
如果（$（'#密码'）.val（）=“”）{
$（“#密码”）.next（“.error”）.html（“请填写您的密码”）；
提交=错误；
}否则
$（'#password'）.next（“.error”）.html（“”）；
如果（$（'[name=“check”]：checked'）。长度===0）{
$（'[name=“check”]：last'）.next（“.error”）.html（“请至少检查一个”）；
提交=错误；
}否则
$（'[name=“check”]'）。下一步（“.error”）.html（“”）；
返回并提交；
})

。错误{
颜色：红色；
}

国家
请选择国家
美国
澳大利亚
印度

名称

电子邮件

密码

复选框


检查1


支票2


支票3

嗯。本地方式怎么样？：）

functionselect（cssSelector）{returndocument.querySleectorAll（cssSelector）}；
变量输入=选择（“#寄存器输入”）；//选择所有子输入的数组
//设置对象内的所有验证
var验证={
名称：函数（名称文本）{
//简化if语句，必要时展开
返回（nameText==“”）错误，不能为空：“确定”；
},
密码：函数（passText）{
返回（passText.length<8）？“太短”：“确定”；
}
};
//迭代所有输入
用于（输入中的var元素）{
if（validations[inputs[elem].id]）{//if验证规则存在。。
console.log（“输入编号”+elem+“已测试”\n”+
“id=”+输入[elem].id+“\n”+
“结果：”+验证[输入[要素]）；
}
}

---

我还没有测试过这个，所以可能会有打字错误

嗯。用本地方式怎么样？：）

functionselect（cssSelector）{returndocument.querySleectorAll（cssSelector）}；
变量输入=选择（“#寄存器输入”）；//选择所有子输入的数组
//设置对象内的所有验证
var验证={
名称：函数（名称文本）{
//简化if语句，必要时展开
返回（nameText==“”）错误，不能为空：“确定”；
},
密码：函数（passText）{
返回（passText.length<8）？“太短”：“确定”；
}
};
//迭代所有输入
用于（输入中的var元素）{
if（validations[inputs[elem].id]）{//if验证规则存在。。
console.log（“输入编号”+elem+“已测试”\n”+
“id=”+输入[elem].id+“\n”+
“结果：”+验证[输入[要素]）；
}
}

我还没有测试过这个，所以可能有

function select( cssSelector ){ return document.querySleectorAll( cssSelector ) };

var inputs = select( '#register input' );  // selects array of all child inputs

//setup all validations within an object
var validations = {
   name: function( nameText ){
      //shorthand if-statements, expand if you need to
      return ( nameText === "" ) ? "error, cannot be empty" : "ok";
   },
   password: function( passText ){
      return ( passText.length < 8 )? "too short" : "ok";
   }
};

//iterate over all inputs
for( var elem in inputs ){
   if( validations[ inputs[ elem ].id ] ){ // if validation rule exists..
      console.log( "input nr " + elem + "tested\n" +
      "id = " + inputs[ elem ].id + "\n" + 
      "outcome: " + validations[ inputs[ elem ] ] );
   }
}