修復HTML5驗證錯誤後的多個表單提交

我有一個表單，我不想提交，直到HTML5驗證發揮作用，顯示錯誤等。我已將Save按鈕綁定到點擊功能。如果用戶點擊保存按鈕，但發現錯誤（通過HTML驗證），然後修復錯誤，然後再次單擊保存按鈕，表單被提交兩次。如果錯誤顯示和修復週期重複多次，表單會多次提交。修復HTML5驗證錯誤後的多個表單提交

以下代碼（也在this fiddle中找到）演示了這一點。點擊「保存」而不填寫名字/姓氏輸入。然後填寫輸入並再次點擊「保存」。您將通過警報消息看到消息＃1至＃3重複兩次。奇怪的是驗證函數根本沒有被第一次點擊（空名框）調用，然後在條目有效時被調用兩次。

注意：如果在第一次單擊「保存」之前填充了框，代碼就可以正常工作。

必須有一些我不瞭解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>

來源

2015-10-18 globalSchmidt

您註冊多個點擊事件偵聽器。對.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/

來源

2015-10-18 00:16:32 buzzsaw

這奏效了！謝謝。你能否解釋一下你看到的「多點擊事件監聽器」，這樣我可以在我的代碼中發現這個問題？ – globalSchmidt

@globalSchmidt每次點擊「#Save」時都會發生事件註冊。正在註冊的函數是在.on（）函數中'#Save'之後定義的函數。如果頁面沒有重新加載或者事件沒有取消註冊，那麼每次聽到'#Save'點擊事件時都會創建該函數的新綁定。這是每次點擊按鈕時導致函數調用增加的原因。 – buzzsaw

修復HTML5驗證錯誤後的多個表單提交

回答

相關問題