Разница между form.submit () и наличием ввода с типом «submit»

У меня есть HTML-страница, содержащая форму. Я хочу сделать некоторые поля "required". Проблема в том, что я не использую <input type="submit"> в своей форме, вместо этого я использую функцию Javascript для отправки формы, потому что мне нужно отправить Javascript-переменную на мой сервер. Вот мой код:

<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();
}

Итак, даже у меня есть required атрибут в моем входе, но форма все еще отправляется, даже если я ничего не вводил во вход.

Вот JSFiddle о том, как я хочу, чтобы моя форма вела себя при нажатии кнопки без ввода чего-либо.

Кто-нибудь знает, как form.submit() отличается от <input> type="submit"?

EDIT: после того, как пользователь2696779 ответит и немного изменит, вот окончательный рабочий код:

<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();
    }
}