如果表單未經驗證，則停止提交

Question

我有一個表格，並且有一個“取消”並提交按鈕。 當用戶提交表單時，如果未填寫必填字段，我想提醒（“錯誤”）並停止提交表單。

這是我簡單的jquery代碼，但是當用戶單擊警報框上的“確定”按鈕時，它將繼續提交。

<script>
$(document).ready(function () {
    $('#<%=btn_reddet.ClientID %>').click(function (event) {
        alert("Error!");
        event.preventDefault();
    });
});
</script>

我如何使其在警報后停止提交？

Answer 1

代替.click ，就可以使用.submit ，你只需要返回false停止表單提交

$('#formID').on('submit',function (event) {
        alert("Error!");
        return false;
});

Answer 2

使用$('form').submit()事件代替$('submit_button').click() 。 如果驗證失敗，則return false ：

$(document).on('submit','form',function(e) {
    var validated = true; 
    // some validation code which sets 'validated = false' if it fails
    return validated;
});

Answer 3

如果要使用

event.preventDefault();

然后，我認為也需要遵循

event.stopPropagation();

否則，您可以使用return false。

Answer 4

event.preventDefault（）和return false不能正常工作，當出現問題（讀取：錯誤）以及event.preventDefault（）是否已經執行時，存在差異，這是一個重要的示例，為什么返回false並不總是有效：

$('a').click( function(e){
    $(this).css("background", "green");
    err();  // err is not defined, so JavaScript will throw error, and the browser will ignore rest of the code (return false;). The browser will perform the default action.
    return false;
});
$('a').click( function(e){
    e.preventDefault();
    $(this).css("background", "green");
    err();  // err is not defined, so JavaScript will throw error, and the browser will ignore rest of the code. We already called event.preventDefault() so the browser will not perform default action.
});