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：

BUTTON的TYPE属性指定按钮的种类并采用值提交（默认），重置或按钮

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

Answer 1

将您的按钮指定为type =“button”以停止自动提交。这个让我一直都在。

Answer 2

Why is my page being redirected back to the original page?

毫无头绪;如你所说，它是一个按钮，而不是输入类型=“提交”，所以它不应该提交。如果删除JS处理程序，它仍会提交吗？

How can I use the validator to validate, but then post the form my own way using $.post?

返回false（来自点击处理程序，以确保不会触发奇怪的按钮行为）并使用回调将用户发送到下一页。现在你的POST开始了，然后你马上转到下一页。我想你想要做的是在POST返回之后转到下一页，为此你只需要将window.location放在你传递给$ .post的回调函数中。

希望这有帮助，但如果不回复。

Answer 3

你应该添加

 return false;

在validateAndSave函数中。通过这种方式，您可以拒绝提交并使用js处理帖子。

Answer 4

$('#next_button').click(…);

不是绑定到按钮的click事件，而是绑定到表单的提交事件。

我认为这是一种更可靠的方法来捕获正在提交的表单，并且您可以从事件处理程序返回false，或者在事件对象上调用.preventDefault()，以阻止表单被提交提交。

jQuery验证 - 如何阻止自动提交？

4 个答案: