CODEWITHSUNDEEP
javascript
user273072545345
user273072545345

Reputation: 1566

Validation of a Simple Form

In process of learning JS. Trying to learn how to loop through an entire form, and have errors pointed out.

This is a hodgepodge that I cobbled together from various tutorials online.

Clearly it's not working.

What I am trying to do is to get the forms' entire collection of its elements, and loop through it, and anything that's blank, to have its error message printed somewhere on the same screen, be it above the form or underneath the textboxes itself.

This is what I have so far. Any help in getting this to work, or at least the concept of what I outlined? Simple and bite-size explanations if possible would be appreciated. 

<!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>

EDIT

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

Upvotes: 0

Views: 48

Answers (1)

ch271828n
ch271828n

Reputation: 17597

Full ans:

<!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>

Several problems.

  1. There seems to be no i in your for loop usage.

Try if (formsCollection.elements.value.length == 0) { to if (formsCollection.elements[i].value.length == 0) {

  1. Where is your Validate function?

Wrap var formsCollection ... END_OF_FOR_LOOP with function Validate(){ and }

Upvotes: 1

Related Questions