title: Jquery submit vs. javascript submit
body: <p>I am trying to invoke a form validation when clicked on ordinary button. This seems to work good with jQuery, but not with plain javascript. <strong>Can anyone explain this difference between jquery's .submit() and javascript's .submit() methods? Or what am I doing wrong?</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Form Submit&lt;/title&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  function validateForm(form) {
    if (form.username.value=='') {
      alert('Username missing');
      return false;
    }
    return true;
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;form action="index.php" name="loginform" method="post" onsubmit="return validateForm(this);"&gt;
    &lt;input name="username" placeholder="username" required="required" type="text" /&gt;
    &lt;input name="send1" type="button" value="Login1" onclick="$(document.forms.loginform).submit();" /&gt;
    &lt;input name="send2" type="button" value="Login2" onclick="document.forms.loginform.submit();" /&gt;
    &lt;input name="send3" type="submit" value="Login3" /&gt;
    &lt;a href="" onclick="event.preventDefault(); $(document.forms.loginform).submit();"&gt; Login4 &lt;/a&gt;
    &lt;a href="" onclick="event.preventDefault(); document.forms.loginform.submit();"&gt; Login5 &lt;/a&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/v7qYD.png" alt="onsubmit results"></p>