如果表单未经验证，则停止提交

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