修復html5驗證錯誤后提交多種表單

Question

在HTML5驗證成功發揮作用，顯示錯誤等之前，我不希望提交表單。我將“ Save按鈕綁定到click函數。 如果用戶單擊“保存”按鈕，但發現錯誤（通過HTML驗證），然后修復錯誤，然后再次單擊“保存”按鈕，則表單將提交兩次。 如果錯誤顯示和修復的循環重復了多次，則表單將被多次提交。

以下代碼（也在此提琴中找到）演示了這一點。 單擊“保存”，而不填寫名字/姓氏輸入。 然后填寫輸入，然后再次單擊“保存”。 您會在警報消息中看到消息＃1至＃3重復了兩次。 奇怪的是，首先單擊（空名稱框）根本沒有調用驗證函數，然后在條目有效時又調用了兩次。

注意：如果在第一次單擊“保存”之前填寫了方框，該代碼就可以正常工作。

關於HTML5表單驗證和Submit事件，肯定有些我不了解的地方，但是我花了數小時來搜索和嘗試各種不同的嘗試，但都無濟於事。 是什么觸發了重復提交事件？ 幫助贊賞！

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

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