form.submit（）与输入类型为“submit”的区别

Question

我有一个包含表单的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>的{​​{1}}有何不同？

编辑：在关注user2696779的回答并做了一些修改之后，这是最终的工作代码：

type="submit"

Answer 1

您当前的HTML输入按钮不是submit类型，而是button类型。因此，requred元素上的input属性将被忽略。要更改此设置，请将按钮的类型更改为submit：

<input type="submit" value="Submit">

支持required属性的浏览器现在会在单击按钮时显示警告：

JSFiddle demo

Answer 2

使用javascript提交不会触发任何验证。如果您想使用常规按钮+ javascript提交并仍然进行验证，您可以使用HTML5的checkValidity函数来验证表单字段或整个表单。

例如，使用JQuery：

if(!$('form')[0].checkValidity()) {
    alert('not valid');
}
else {
    $('form').submit();
}

请参阅工具示例小提琴：http://jsfiddle.net/8Kmck/2/