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

我很想使用jQuery验证器插件来验证我的代码，但我想禁用自动提交我的表单。我宁愿使用jQuery $.post方法自己发送它。jQuery验证 - 如何防止自动提交？

事实上，我不太确定为什么我的表单正在提交考虑到我的按钮不是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：

按钮的TYPE属性指定的那种按钮和取值提交（默认值），重置或按钮

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

来源

2011-08-24 Joe

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

来源

2011-08-24 18:23:02 Geoff

非常感谢您的帮助。我已更新我的回复，以包含指向按钮元素的更多信息的链接。我没有意识到它默认是'type =“submit”'。再次欢呼。 – Joe

感谢您的这一点，我挣扎了几个小时 –

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的回调函数中。

希望这有助于，但如果不回发。

来源

2011-08-24 18:22:03 machineghost

哦，不理我的第一句话;杰夫解释说。 – machineghost

啊。我没有想到在回调中放置'window.location'位。这将会很好，并且也会使调试变得更加容易。干杯。 – Joe

您应该添加

return false;

里面的validateAndSave功能。通过这种方式，您可以拒绝使用js提交和处理帖子。

来源

2011-08-24 18:23:12 strada

它不是一个提交按钮。另外，validateAndSave的返回值并没有被他的处理程序使用，所以这样做什么都不会做（好吧，除非他还从处理程序返回了validateAndSave调用的结果）。 – machineghost

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

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

我认为这是一种更可靠的方式来捕捉提交的表单，并且您可以从事件处理函数返回false，或者在事件对象上调用.preventDefault()来停止提交表单。

来源

2011-08-24 18:44:44 s4y

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

回答

相关问题