Question

我正在为使用HTML 5表单验证API的HTML 5应用编写一些单元测试。我已经将submit事件处理程序附加到表单中，该表单在序列化为JSON并将其传递给我的服务器之前执行一些自定义处理。

我发现，如果我在表单上发起jQuery submit()事件，即使它无效，我的提交处理程序仍会被调用。

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

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

那么，是什么给出了？

Answer 1

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

重要的是要记住，许多花哨的HTML5“智能标记”行为旨在允许事情发生而不需要

Answer 2

尝试触发提交按钮：

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

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

小提琴：http://jsfiddle.net/SYg4h/30/

Answer 3

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

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

试试这个：http://jsfiddle.net/Cqzcu/4/

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

3 个答案: