title: Form and input validation
body: <p>I am trying to get two inputs inside of a <code>form</code> tag to bring up a error message if you leave either of them blank. </p>
  
  <p>I went to w3schools and tried their code but it does not work. (see below)</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form name="myForm"  onsubmit="return validateForm()" method="post"&gt;
      Name: &lt;input type="text" name="fname"&gt;
      &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Js</p>
  
  <pre><code>function validateForm() {
      var x = document.forms["myForm"]["fname"].value;
      if (x == null || x == "") {
         alert("Name must be filled out");
         return false;
      }
  }
  </code></pre>
  
  <p>I removed the <code>action="demo_form.asp"</code> from the code because my teacher told me to</p>
  
  <p>Here is my code<br>
  HTML</p>
  
  <pre><code>&lt;div class="loginShite"&gt;
      &lt;form name="username" onsubmit="return validateForm()" method="post"&gt;
          &lt;input type="text" name="username" placeholder="@Username" /&gt; 
          &lt;input type="password" name="password" placeholder="Password" /&gt; 
          &lt;br /&gt;
      &lt;/form&gt;
      &lt;div class="loginButton"&gt;
          &lt;a href="#homePage"&gt;
             &lt;input type ="button" value="login" /&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Js</p>
  
  <pre><code>function validateForm() {
      var x = document.forms["username"]["password"].value;
      if (x == null || x == "") {
         alert("Name must be filled out");
         return false;
      }
  }
  </code></pre>
  
  <p>I would be greatly appreciative is somebody could either tell me what I'm doing wrong OR point me in the right direction to solve the problem.</p>
  
  <p>Thank you in advance.</p>