Javascript 即使表单无效，也会调用HTML5表单提交处理程序

我正在为使用HTML5表单验证API的HTML5应用程序编写一些单元测试。我在表单中附加了一个

submit

事件处理程序，该处理程序在序列化为JSON并将其传递给我的服务器之前进行一些自定义处理

不过，我发现，如果我在表单上启动jQuery

submit（）

事件，即使它无效，我的提交处理程序仍然会被调用

相反，我希望我的事件处理程序不会被调用，因为表单无效

我创建了一个JSFIDLE来演示（在Chrome 20中测试）：

---

那么，有什么好处呢？

尝试使用按钮上的单击处理程序

$('#myform').submit(function (e) {
    // check for validation here
    var value = $('#foo').val();
    if (!value || value == undefined)
        $('#message').html('It did not submit');
    else
        $('#message').html("It submitted");
    return false;
});

$('#submitBtn').click(function(){
    $('#myform').submit();
});

---

尝试以下操作：

尝试触发提交按钮：

$('#submitBtn').click();

如果你没有，就做一个隐藏的，复制动作

Fiddle：

触发“.submit（）”处理程序与HTML5表单验证机制没有任何关系。这种机制实际上完全独立于JavaScript，事实上，它在DOM API中几乎不可用。您可以显式地调用表单元素上的“checkValidity（）”，但这只返回一个布尔结果，不会执行用户单击“提交”表单控件时发生的任何可视表单更新

---

请记住，许多花哨的HTML5“智能标记”行为都是为了让事情在不需要JavaScript的情况下发生而设计的。

我无法用你的小提琴在Chrome上复制这一点。我还将操作更改为外部站点，但仍然没有引起任何问题？另外，尝试使用

e.preventDefault（）

代替或以及

返回false我不认为表单验证是在通过编程调用操作时执行的。您可以自己调用“checkValidity（）”例程，但这不会执行可视有效性指示。（实际上，我很确定情况就是这样；在fiddle中，您甚至没有使用表单DOM元素上的实际“submit（）”方法；它只是jQuery处理程序。您必须自己调用“checkValidity（）”。）返回false时，e.preventDefault（）会返回false；以及e.stopPropagation（）；（在jQuery中，阅读源代码。）因此，在这种情况下，真的返回false更好。@rlemon但前提是插入的代码没有抛出异常…@Gavin您是对的。。。我将编辑这个问题。在对否决票如此友好之前，也许你想补充一点，看看我的答案有什么问题。所有这些消极情绪都不会让你有任何结果。（我不是落选者）我已经试过了，而且很有效。但它不会测试
enter
键提交。我想通过在最后一个字段中按“回车”来捕捉提交可能发生的情况，并认为“提交”是最好的方式。很酷，感谢您的解释。正如另一张海报所建议的那样，它似乎与点击处理程序一起工作。有人在前5分钟就对这个问题投了疯狂的一票！我希望按钮点击的默认处理程序最终会触发提交处理程序，所以添加一个只调用submit的点击处理程序是没有帮助的。瘸的可能地它为您提供了阻止默认浏览器操作的机会。但是，当提交按钮不在表单中时，就需要一个点击处理程序。啊，昨天我知道不是这样的。您可以在按钮上放置一个
form=“formId”
属性，它将提交指定的表单。在HTML5中，有许多与表单相关的新属性