jQuery validate-如何防止自动提交? [英] jQuery validate - how can I prevent the automatic submit?

问题描述

我很想使用jQuery验证程序插件来验证我的代码，但是我想禁用自动提交表单的功能.我宁愿自己使用jQuery $.post方法发送它.

I'm keen to use the jQuery validator plugin to validate my code, but I would like to disable to automatic submitting of my form. I'd rather send it myself using the jQuery $.post method.

实际上，我不确定我的表单为什么要提交，因为我的按钮不是submit类型，而是<button></button>.

In fact, I'm not really sure why my form is submitting considering that my buttons aren't of type submit but are just <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"框，其中我的所有错误消息都在其中出现.

and my onClick listener, in which I am hoping that on valid input I can post the form data and then move to a new page, else reposition the window so that the user sees the `error_messages' box where all my error messages show up.

$('#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'短暂闪烁然后我又回到原来的页面.同样在验证失败时，我的页面似乎无法正确地重新定位自己.

The result of this though (and the result is the same whether debug is set to true or false) is that on valid input, I can see by looking at the status bar that `next_page.php' flashes up briefly and then I get taken back to my original page again. Also on failure of validation, my page doesn't seem to reposition itself properly.

所以我的问题是:

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

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

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

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

非常感谢.

通过回复进行更新

根据此按钮元素上的页面:

BUTTON的TYPE属性指定按钮的类型，并采用值Submit(默认)，reset或button

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

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

So my buttons were taking the default value of type="submit"

推荐答案

将您的按钮指定为type ="button"以停止自动提交.这一直让我开心.

Specify your buttons as type="button" to stop the automatic submit. This one gets me all the time.

这篇关于jQuery validate-如何防止自动提交?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！