Question

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

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

注意：如果在＆＃34; Save＆＃34;之前填写了这些框，代码就可以正常工作。是第一次点击。

必须有一些我不了解HTML5表单验证和提交事件的内容，但我花了几个小时来搜索这个并尝试不同的事情无济于事。触发重复提交事件的原因是什么？帮助赞赏！

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

我在这里更新了你的小提琴：http://jsfiddle.net/frqgtsdo/

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

1 个答案: