javascript - 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> 不同的type="submit" ？

编辑:在遵循 user2696779 的回答并进行一些修改后，这是最终的工作代码:

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

Answer 1

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

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

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

JSFiddle demo .