title: Validating form using HTML and JavaScript - Checking form input matches a value in an array
body: <p>I have a simple web form which accepts a user email and password for log in. 
  I want to check the users email and password match up with what is stored in an external javascript file and if the combination matches then proceed to the index.html page.</p>
  
  <p>My array is declared in my router file as follows:</p>
  
  <pre><code>var USERS = { users: [] };
  
  function User(type, useremail, password) {
   this.type = type;
   this.useremail = useremail;
   this.password = password;
  }
  
  var Bob = new User("rep", "bob@bob.com", "qwerty");
  USERS.users.push(Bob);
  
  var Helen = new User("rep", "helen@helen.com", "test");
  USERS.users.push(Helen);
  
  var Dominic = new User("customer", "dom@dom.com", "1234");
  USERS.users.push(Dominic);
  
  var James = new User("grower", "james@james.com", "pass1");
  USERS.users.push(James);
  </code></pre>
  
  <p>My html form is as follows:</p>
  
  <pre><code> &lt;div id="loginform"&gt; 
      &lt;form id ="login" name="login" method="post" accept-charset="utf-8" onsubmit="return verify();"&gt; 
          &lt;h1&gt;&amp;nbsp;&lt;/h1&gt;
          &lt;label&gt;
          &lt;span&gt;Email Address:&lt;/span&gt;
          &lt;input id="email" type="email" name="email" placeholder="Enter a valid email address" required /&gt;
          &lt;/label&gt;
          &lt;br&gt;
          &lt;label&gt;
          &lt;span&gt;Password:&lt;/span&gt;
          &lt;input id="password" type="password" name="password" placeholder="Password" required /&gt;
          &lt;/label&gt;
          &lt;br&gt; &lt;br&gt;
          &lt;label id="reset"&gt;&lt;a href="#"&gt;Click here to reset your password&lt;/a&gt;               
          &lt;/label&gt;
          &lt;br&gt;
          &lt;label&gt;
          &lt;span&gt;&amp;nbsp;&lt;/span&gt;
          &lt;input id="submit_button" type="submit" value="Login" /&gt;
          &lt;/label&gt;       
  
  &lt;!-- &lt;input type="submit" value="Login" onsubmit = "verify()"&gt; --&gt;&lt;!--  &lt;input type="submit" name="submit" value="Send"&gt; --&gt;
  
        &lt;/form&gt; &lt;!-- End of log in form --&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>My attempt at checking if the user email and password combo match:</p>
  
  <pre><code>function verify() {
  
  validUser = false;
  
      for (var x in USERS.users){
          //console.log(USERS.users[x].userid);
          if (query.useremail === USERS.users[x].useremail
             &amp;&amp; query.password === USERS.users[x].password)              
          {
                  validUser = true;
                  break;
           } // end of if
  
      }// end of for
  
    console.log(validUser);
  
      if (validUser === true){
      console.log("logged in");
      res.render('index.html');
      }
  }
  </code></pre>
  
  <p>Just in case you need to see it, a section in my router where I feedback the log in page on request:</p>
  
  <pre><code>    app.get('/views/login.html', function (req, res) {
          res.render('../views/login.html');
          //console.log("Log in page displayed");
  
      });
  
  
      app.post('/views/login.html', function (req, res) {
          var url_parts = url.parse(req.url, true);
          var query = url_parts.query;
  
      console.log(query);
      console.log("Username: " + query.useremail);
      console.log("Password: " + query.password);
  
  });
  </code></pre>
  
  <p>I've confused myself with all the different codes and files ... How do I go about verifying that the user can log in?</p>
  
  <p>Where do I put my verify() function? I currently have it within the router file below the user data - but I want to use it within HTML so I was considering putting into  tags there...?</p>