HTML5 验证的表单事件失败？ [复制]答案

【问题标题】：Form event on HTML5 validation failed? [duplicate]HTML5 验证的表单事件失败？ [复制]
【发布时间】：2017-11-07 15:04:47
【问题描述】：

我一定错过了什么。

我有一个表格：

<form action="/" method="post">
  <input type="text" name="field" required />
  <input type="submit" value="Submit" /> 
</form>

当用户点击submit 按钮而不填写required 字段时，我想添加一个特殊行为。我有 jQuery，所以我的直觉写道：

$('form').on('submit', function(e){
  console.log('Adding special behavior');
});

但这没有被触发。找了$('form').on('validate')什么的，但是什么都找不到。

这一步没有触发任何事件吗？我是否必须删除 required 并手动处理所有验证？那将是令人惊讶的！

谢谢

编辑：这与this question 没有重复，因为我不（想）使用jquery.validate.js，而且我的问题不依赖于 jQuery（我碰巧使用它，但这只是为了清晰起见）。这是我想澄清的 HTML5 行为。

【问题讨论】：

【解决方案1】：

当您的输入具有必需属性时，浏览器会在提交表单之前确保输入有效。因此，您的事件永远不会被触发。

但是，您可以在表单中添加 novalidate 属性以绕过浏览器验证并执行手动验证，同时保留输入所需的属性。

<form action="/" method="post" novalidate>
    <input type="text" name="field" required />
    <input type="submit" value="Submit" />
</form>

另外，如果你想阻止表单正常提交，你必须在你的活动中做一个preventDefault。

$('form').on('submit', function(e){

    e.preventDefault();
    console.log('Adding special behavior');

});

【讨论】：

【解决方案2】：

使用表单提交：

< form action="/" method="post" onsubmit="test()">

function test() {
return false; //never submit
}

【讨论】：