Question

在学习JS的过程中。试图学习如何遍历整个表单，并指出错误。

这是一个大杂烩，我在网上拼了各种教程。

显然它不起作用。

我想要做的是获取表单的整个元素集合，并循环遍历它，以及任何空白的内容，将其错误消息打印在同一屏幕上的某个位置，无论是在表单上还是在下面文本框本身。

这是我到目前为止所拥有的。让它发挥作用的任何帮助，或者至少是我概述的概念？如果可能的话，简单和一口大小的解释将不胜感激。

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="utf-8" />
   </head>
   <body>
      <form method="post" action="" id="myForm">
         <div id="validation"></div>
         <p><label>Name<br><input type="text" name="Name"></label></p>
         <p><label>Email<br><input type="text" name="Email"></label></p>
         <p><input type="submit" value="Submit"></p>
      </form>
      <script>
         var formsCollection = document.forms[0]; 
         for (var i = 0; i < formsCollection.elements.length; i++) {
             if (formsCollection.elements.value.length == 0) {
                 form.elements.input.border = "1px solid red"; 
                 form.Name.style.backgroundColor = "#FFCCCC";
             }
             return true;
         }
         document.getElementById("myForm").onsubmit = function () {
             return Validate(this);
         };
      </script>
   </body>
</html>

修改

<script>
  function Validate() {
     var formsCollection = document.forms[0]; 
     for (var i = 0; i < formsCollection.elements.length; i++) {
         if (formsCollection.elements[i].value.length == 0) {
             form.elements.input.border = "1px solid red"; 
             form.Name.style.backgroundColor = "#FFCCCC";
         }
         return true;
     }
     document.getElementById("myForm").onsubmit = function () {
         return Validate(this);
     };
 }
  </script>

Answer 1

完整的答案：

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="utf-8" />
   </head>
   <body>
  <form method="post" action="" id="myForm">
     <div id="validation"></div>
     <p><label>Name<br><input type="text" name="Name"></label></p>
     <p><label>Email<br><input type="text" name="Email"></label></p>
     <p><input type="submit" value="Submit"></p>
  </form>

<script>
 document.forms[0].onsubmit= function() {
     var form = document.forms[0];
     for (var i = 0; i < form.elements.length; i++) {
         if (form.elements[i].value.length == 0) {
               console.log(form.elements[i]);
             form.elements[i].border = "1px solid red"; 
             form.elements[i].style.backgroundColor = "#FFCCCC";
             return false;
         }
     }
 }
 </script>
   </body>
</html>

有几个问题。

for循环使用中似乎没有i。

试试if (formsCollection.elements.value.length == 0) { 到if (formsCollection.elements[i].value.length == 0) {

您的Validate功能在哪里？

使用var formsCollection ... END_OF_FOR_LOOP和function Validate(){

}

验证简单表格

1 个答案: