form onsubmit won't work unless in Javascript : <p>I recently started doing form validation and I am trying to understand something. I have yet to find this anywhere else on SE.</p>

<p>When I have <code>onsubmit="return validateForm()"</code> or <code>onsubmit="validateForm()"</code> in the <code>&lt;form&gt;</code> element, the form does not do anything. However, when I remove <code>onsbumit</code> from the form tag and instead do <code>document.forms["favorite"].onsubmit = function validateForm()</code> in the JS file, it works fine. </p>

<p>I got it working, but I am trying to understand why the "normal" method of <code>onsubmit</code> in the html isn't working.</p>

<p>For reference, here is my code as it works now:</p>

<p>HTML:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;script type="text/javascript" src="form.js"&gt;&lt;/script&gt;
    &lt;title&gt;Form&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form name="favorite" action="#" method="post"&gt;
      Favorite Car Brand: &lt;input type="text" name="car"&gt;
      &lt;input type="submit" value="Submit"&gt;
    &lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>JS:</p>

<pre><code>window.onload = function(){
  document.forms["favorite"].onsubmit = function validateForm(){
    var input = document.forms["favorite"]["car"].value;
    if(input == ""){
      alert("You missed an entry");
      return false;
    }
  }
}
</code></pre>
