jQuery validate - 如何防止自动提交？

Question

我热衷于使用 jQuery 验证器插件来验证我的代码，但我想禁用自动提交表单。我宁愿自己使用 jQuery $.post 发送它方法。

事实上，考虑到我的按钮不是 submit 类型，我不太确定为什么要提交表单但只是 <button></button> .

<form id="my_form" name="my_form" method="post" action="">
    ...
    <button id="previous_button" class="nav-button">Previous</button>
    <button id="next_button" class="nav-button">Next</button>
</form>

和我的 onClick 监听器，我希望在有效输入时我可以发布表单数据，然后移动到新页面，否则重新定位窗口，以便用户看到“error_messages”框，其中包含我的所有错误消息出现。

$('#next_button').click(function(event) {
    validateAndSave();
});

function validateAndSave() {
    if($('#my_form').valid()) {
        $.post('save_form_to_database.php', 
            $('#my_form').serialize());
        window.location = 'next_page.php';
    } else {
        // reposition to see the error messages
        window.location = '#error_messages';
    }
}

这样做的结果(无论 debug 设置为 true 或 false，结果都是相同的)是，在有效输入时，我可以通过查看状态栏看到“next_page.php”短暂闪烁然后我又回到原来的页面。另外，在验证失败时，我的页面似乎无法正确重新定位。

所以我的问题是:

• 为什么我的页面被重定向回原始页面？

• 如何使用验证器进行验证，然后使用 $.post 以我自己的方式发布表单？

提前非常感谢。

更新感谢回复

根据this page on the button element :

The TYPE attribute of BUTTON specifies the kind of button and takes the value submit (the default), reset, or button

所以我的按钮采用默认值 type="submit"

Answer 1

将按钮指定为 type="button"以停止自动提交。这个一直让我着迷。