Q:

Difference between form.submit() and having an input with type of "submit"

I have a HTML page containing a form. I want to make some fields "required". The problem is that I'm not using a <input type="submit"> in my form, instead, I use a Javascript function to submit the form because I need to send a Javascript variable to my server. Here is my code:
<form action="/toServer">
  Username: <input type="text" name="usrname" required>
  <input type="button" onclick="submitForm(this.form)" value="Submit">
</form>

var submitForm = function(frm){
    var qstNbr = document.getElementById('hiddenField');
    qstNbr.value = someJsVariable;
    frm.submit();
}

So, Even is I have the required attribute in my input but the form is still being submitted even if I don't enter anything in the input.
Here is a JSFiddle of how I want my form to behave when clicking on the button without entering anything.
Anyone knows how form.submit() is different from having an <input> of type="submit" ?
EDIT: After following user2696779's answer and doing a little modification, here's the final working code:
<form action="/toServer">
  Username: <input type="text" name="usrname" required>
  <input type="submit" onclick="submitForm(this.form)" value="Submit">
</form>

var submitForm = function(frm){
    if (frm.checkValidity()) {
    var qstNbr = document.getElementById('hiddenField');
    qstNbr.value = someJsVariable;
    frm.submit();
    }
}

A:

Submitting using javascript will not trigger any validation. If you want to submit using a regular button + javascript and still have validation, you may use HTML5's checkValidity function to verify form fields, or the entire form.
For example, using JQuery:
if(!$('form')[0].checkValidity()) {
    alert('not valid');
}
else {
    $('form').submit();
}

See fiddle for working example: http://jsfiddle.net/8Kmck/2/

