修复 html5 个验证错误后提交多个表单

Question

我有一个表单，在 HTML5 验证发挥其魔力、显示错误等之前我不想提交。我将 Save 按钮绑定到点击功能。如果用户单击保存按钮，但发现错误（通过 HTML 验证），然后修复错误，然后再次单击保存按钮，表单将提交两次。如果多次重复报错和修复的循环，则表单提交多次。

以下代码（也可在 this fiddle 中找到）演示了这一点。单击 "Save" 而不填写 firstname/lastname 输入。然后填写输入并再次单击 "Save"。您会看到消息 #1 到 #3 重复了两次的警报消息。奇怪的是，第一次单击（空名称框）时根本没有调用验证函数，然后在条目有效时调用了两次。

注意：如果在第一次单击 "Save" 之前填写了方框，代码就可以正常工作。

关于 HTML5 表单验证和提交事件肯定有一些我不理解的地方，但我花了几个小时在谷歌上搜索这个并尝试了不同的东西都无济于事。是什么触发了重复提交事件？感谢帮助！

$('body').on('click','#Save', function (ev) {
    //ev.preventDefault();

    alert('duh - click captured');

    $('#client_form').submit(function (e) {

        alert('1 - submit fired');

        e.preventDefault();
        e.stopPropagation();

        handle_client_form(e);
    });

});


function handle_client_form(e) {

    if (manualValidate(e)) {
        alert('3a - good to go; process form inputs');
    } else {
        alert('3b - invalid form');
    }

}

function manualValidate(e) {
    if (e.target.checkValidity()) {
        alert('2 - validate OK!');
        e.stopPropagation();
        return true;
    } else {
        e.stopPropagation();
        return false;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="client_form">
    <input name="FirstName" placeholder="first name" required/>
    <input name="LastName" placeholder="last name" required />
    <button id="Save">Save</button>
</form>

Answer 1

您正在注册多个点击事件侦听器。调用 .off() 将解决此问题。

$('body').on('click','#Save', function (ev) {
    //ev.preventDefault();

    alert('duh - click captured');

    $('#client_form').submit(function (e) {

        alert('1 - submit fired');

        e.preventDefault();
        e.stopPropagation();

        handle_client_form(e);
    });

$('body').off('click');
});

我已经在此处更新了您的 fiddle：http://jsfiddle.net/frqgtsdo/

修复 html5 个验证错误后提交多个表单

multiple form submits after fixing html5 validation errors

javascript

jquery

html

validation

form-submit