驗證簡單表格

學習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>

來源

2017-08-29 user273072545345

全部答：

<!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(){和}

來源

2017-08-29 09:26:34 Turtle

我把在變化如你所說的'EDIT'部分......仍然沒有工作...任何想法，爲什麼？ – user273072545345

@ user273072545345讓我看看。請等待。 – Turtle

@ user273072545345我需要15分鐘才能完成它，並最終生效。 Plz選擇我作爲正確的答案，並給我一個upvote。謝謝。 – Turtle

驗證簡單表格

回答

相關問題